CSS 如何淡出图像的边？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15489165/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fade out sides of images?
提问by Daniel Morgan
When you make the browser wider, you will notice that the right and left side of images is fading out in black.
当您将浏览器变宽时，您会注意到图像的右侧和左侧逐渐淡出黑色。
I need to apply the same feature on my gallery but have no idea. I have found the this >> linkas well but its just a horizontal line not sure how to attach it to both side of images and make the same result as the link.
我需要在我的画廊上应用相同的功能，但不知道。我也找到了 this >>链接，但它只是一条水平线，不知道如何将它附加到图像的两侧并获得与链接相同的结果。
In the comments, ultranaut mentioned that I can apply the filter on images but the question is that if I apply it on the images how to adjust the size, because browser windows might be in different size and the pictures side should be adjustable to every browser size.
在评论中，ultranaut 提到我可以在图像上应用过滤器，但问题是如果我将它应用到图像上如何调整大小，因为浏览器窗口可能有不同的大小，图片侧应该可以针对每个浏览器进行调整尺寸。
回答by ultranaut
Here's one way to skin this cat:
这是给这只猫剥皮的一种方法：
HTML:
HTML：
<div class="frame">
<div class="fade"></div>
<img src="picture.jpg" alt=""/>
</div>
CSS:
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%
);
}
Personally, I'm not a huge fan of the (semantically) unnecessary fadediv, and I'm sure there's probably a more clever way to do the same effect without it, but it'll work.
就我个人而言，我不是（语义上）不必要的fadediv 的忠实拥护者，而且我确信可能有一种更聪明的方法可以在没有它的情况下实现相同的效果，但它会起作用。
I only included the webkit prefixed rule, if you want to get legit you'd need to add the other vendor prefixes.
我只包含了 webkit 前缀规则，如果你想合法，你需要添加其他供应商前缀。
Fiddle here.
在这里摆弄。
Update: If the image is just serving as background—as is the case in your linked example—the gradient and image can both be set on the css for the containing element:
更新：如果图像仅用作背景（如链接示例中的情况），则可以在包含元素的 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>
Less muss, less fuss: new-style fiddlewith vendor prefixes and everything.
少麻烦，少大惊小怪：带有供应商前缀和所有内容的新型小提琴。
回答by Marc Laugharn
Using just CSS3, try a Vignette.
仅使用 CSS3，尝试Vignette。
Verbatim code:
逐字代码：
HTML:
HTML：
<p class="vignette"><img src="image.jpg"></p>
CSS:
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: "";
}
