CSS模糊奇怪的阴影效果 [英] CSS Blur Weird Shadow Effect

问题描述

我有这个奇怪的问题，我不知道是什么造成的。

我有一个大图片库，我重新调整大小到使用CSS的620 x 250像素。当用户将鼠标悬停在图片上时，我会在其中显示包含某些文字的叠加层。我也有一点对图像的模糊效果。有一个实时工作版本，您可以在这里查看：

这是不可预测的，我不明白。我可以做什么？

这是我的代码：

  div> 
< img src =https://assets.crowdsurge.com/datacapture/example/img/example_logo.pngclass =gallery> 
< div class =overlay> 
< h2>测试！< / h2> 
< / div> 
< / div> 
 
< div> 
< img src =https://assets.crowdsurge.com/datacapture/example/img/example_logo.pngclass =gallery> 
< div class =overlay> 
< h2>测试！< / h2> 
< / div> 
< / div> 
 
< div> 
< img src =https://assets.crowdsurge.com/datacapture/example/img/example_logo.pngclass =gallery> 
< div class =overlay> 
< h2>测试！< / h2> 
< / div> 
< / div> 
 
< div> 
< img src =https://assets.crowdsurge.com/datacapture/example/img/example_logo.pngclass =gallery> 
< div class =overlay> 
< h2>测试！< / h2> 
< / div> 
< / div> 
 
 
 div {
 width：620px; 
 height：250px; 
 overflow：hidden; 
 margin-bottom：15px; 
 position：relative; 
} 
 
 div img {
 width：100％; 
} 
 
 div：hover img {
 -webkit-filter：blur（10px）; 
 -moz-filter：blur（10px）; 
 -o-filter：blur（10px）; 
 -ms-filter：blur（10px）; 
 filter：blur（10px）; 
} 
 
 div .overlay {
 display：none; 
 height：100％; 
 width：100％; 
 background-color：#fff; 
 opacity：0.6; 
 position：absolute; 
 top：0px; 
 color：＃000; 
 box-sizing：border-box; 
 -webkit-box-sizing：border-box; 
 font-weight：bold; 
 font-size：30px; 
} 
 
 div：hover .overlay {
 display：block; 
} 
  

解决方案

因为模糊不是很执行css过滤器，您需要强制硬件加速时应用它。

我为修复您的问题所做的一切都是添加：

  div：hover img {
 -webkit-transform：translate3d（0，0，0）; 
} 
  

jsFiddle示例： http://jsfiddle.net/y60c18fc/1/

这里是一篇更详细的文章后台运作情况： http：// blog.kaelig.fr/post/47025488367/css-filters-in-the-real-world

I'm having this really weird issue that I have no idea what's causing it.

I have a gallery of large images, that I'm re-sizing to 620 x 250 pixels with CSS. When a user hovers over the image, I show an overlay with some text in it. I also have a bit of a blur effect on the image. There's a live working version you can take a look at here: http://snoriderswest.com/hotshots.

So, now I set the exact same thing up on another site. But on random photos, it'll produce this really strange shadow extending beyond the image. It happens to maybe 1 in 5 photos. If I change any CSS, it could happen to totally different images.

Also, I just realized, it only happens in Safari. Here's a jsfiddle of what's going on: (Make sure you view it in safari!) http://jsfiddle.net/y60c18fc/

It's just so unpredictable that I don't understand. What can I do?

Here's my code:

<div>
    <img src="https://assets.crowdsurge.com/datacapture/example/img/example_logo.png" class="gallery">
    <div class="overlay">
        <h2>Test!</h2>
    </div>
</div>

<div>
    <img src="https://assets.crowdsurge.com/datacapture/example/img/example_logo.png" class="gallery">
    <div class="overlay">
        <h2>Test!</h2>
    </div>
</div>

<div>
    <img src="https://assets.crowdsurge.com/datacapture/example/img/example_logo.png" class="gallery">
    <div class="overlay">
        <h2>Test!</h2>
    </div>
</div>

<div>
    <img src="https://assets.crowdsurge.com/datacapture/example/img/example_logo.png" class="gallery">
    <div class="overlay">
        <h2>Test!</h2>
    </div>
</div>


div {
  width: 620px;
  height: 250px;
  overflow: hidden;
  margin-bottom: 15px;
  position: relative;
}

div img {
  width: 100%;  
}

div:hover img {
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
}

div .overlay {
  display: none;
  height: 100%;
  width: 100%;
  background-color: #fff;
  opacity: 0.6;
  position: absolute;
  top: 0px;
  color: #000;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-weight: bold;
  font-size: 30px;
}

div:hover .overlay {
  display: block;
}

解决方案

Because blur is not a very performant css filter, you need to force hardware acceleration when applying it. Applying a 3d translate is a nifty way of forcing it.

All I did to fix your issue was add:

div:hover img {
    -webkit-transform: translate3d(0, 0, 0);
}

jsFiddle example here: http://jsfiddle.net/y60c18fc/1/

And here is a more indepth article on what is going on behind the scenes: http://blog.kaelig.fr/post/47025488367/css-filters-in-the-real-world

这篇关于CSS模糊奇怪的阴影效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！