Question

当您使浏览器更宽时，您会注意到图像的右侧和左侧以黑色淡出。

我需要在我的画廊中应用相同的功能，但不知道。我找到了这个＆gt;＆gt; link也是如此，但它只是一条水平线，不知道如何将它附加到图像的两侧，并产生与链接相同的结果。

在评论中，ultranaut提到我可以在图像上应用过滤器，但问题是如果我在图像上应用它如何调整大小，因为浏览器窗口可能是不同的大小，图片方面应该是可调整的到每个浏览器大小。

Answer 1

这是给这只猫皮肤的一种方法：

HTML：

<div class="frame">
  <div class="fade"></div>
  <img src="picture.jpg" alt=""/>
</div>

CSS：

.frame {
    width: 315px;
    height: 165px;
    margin: 20px;
    position: relative;
}

.fade {
    height: 100%;
    width: 100%;
    position:absolute;
    background: -webkit-linear-gradient(left, 
                rgba(0,0,0,0.65) 0%, 
                rgba(0,0,0,0) 20%,
                rgba(0,0,0,0) 80%,
                rgba(0,0,0,0.65) 100%
    );
}

就个人而言，我不是（语义上）不必要的fade div的忠实粉丝，而且我确信如果没有它，可能会有更聪明的方法来做同样的效果，但它会起作用。

我只包含了webkit前缀规则，如果你想要合法，你需要添加其他供应商前缀。

小提琴here。

<强>更新：如果图像仅用作背景 - 就像链接示例中的情况一样 - 渐变和图像都可以在包含元素的css上设置：

.frame {
  width: 315px;
  height: 165px;
  margin: 20px;

  background-image: url(picture.jpg);
  background-image: -webkit-linear-gradient(left, 
    rgba(0,0,0,0.9) 0%, 
    rgba(0,0,0,0) 20%,
    rgba(0,0,0,0) 80%,
    rgba(0,0,0,0.9) 100%
  ),
  url(picture.jpg);
}

...

<div class="frame">
  Content...
</div>

减少麻烦，减少麻烦：new-style fiddle包含供应商前缀和所有内容。

Answer 2

只使用CSS3，试试Vignette。

逐字代码：

HTML：

<p class="vignette"><img src="image.jpg"></p>

CSS：

p.vignette {
  position: relative;
}
p.vignette img {
 display: block;
}
p.vignette:after {
 -moz-box-shadow: inset 0 0 10em #666;  
 -webkit-box-shadow: inset 0 0 10em #666;   
 box-shadow: inset 0 0 10em #666;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 2;
 content: "";
}

如何淡出图像的边缘？

2 个答案: