Blurry background with no transparency but that takes into account the color behind-CodePudding

I am new to CSS and was wondering how I could achieve the following behavior: somewhat blurry, but with no transparency. enter image description here https://rarible.com/mitama-mint/items

I could not deduce anything from the chrome inspector. I tried to add some transparency but it is not that.

do you have an idea?

thanks

I added some transparency with a white background. but it was not the right behavior.

CodePudding user response：

You could apply a blur backdrop-filter, to get the desired effect. As you provided no code, I'll show you a example and please have a look on the MDN Web Docs.

Example:

.example-container {
  background-image: url("https://interactive-examples.mdn.mozilla.net/media/examples/balloon.jpg");
  background-size: cover;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#example-element {
  font-weight: 700;
  flex: 1;
  text-align: center;
  padding: 20px 10px;
  background-color: rgba(255, 255, 255, 0.2);
}

<div >
    <div id="example-element" style="backdrop-filter: blur(10px);">Example</div>
</div>

From the MDN page, this is a "property that lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent."