是否可以像在视频制作中那样只在 CSS 中模糊背景图像？

Question

In my site, I have a photo div with random user submitted pictures. I have the same 'fill the frame' issues as landscape video like broadcast television when mixed with portrait cell phone video - they use a blurred enlarged version to fill the unused space. Is there a way to produce this effect solely in CSS? In all of my attempts, the blur affects the entire stack, blurring all overlaying images and text.

<div class="h-full">
   <div style=" background: url('url');background-size:cover;filter:blur(8px);">
      <img class="h-[390px] w-full object-contain object-center" src="url">
   </div>
</div>

Desired Outcome

My Outcome My image is portrait and is showing twice, but totally ruined by the blur bleeding through

Extra Credit: Does this effect have a official name?

Answer 1

You may use backdrop-filter to prevent edge bleeding for blurred background (click Run code snippet again to see a different picture):

 body { margin: 0; overflow: hidden; }.image-frame { width: 100vw; height: 100vh; position: relative; }.image-frame.blur { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: cover; background-position: center; }.image-frame img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: center; /* blurring */ backdrop-filter: blur(10px); }

 <div class="image-frame"> <div class="blur" style="background-image: url(https://picsum.photos/512/512)"></div> <img src="https://picsum.photos/512/512" /> </div>