当您使浏览器更宽时,您会注意到图像的右侧和左侧以黑色淡出.
我需要在我的画廊中应用相同的功能,但不知道.我找到了这个>> link也是如此,但它只是一条水平线,不知道如何将它附加到图像的两侧,并产生与链接相同的结果.
在评论中,ultranaut提到我可以在图像上应用过滤器,但问题是如果我在图像上应用它如何调整大小,因为浏览器窗口可能有不同的大小,图片方面应该可以调整到每个浏览器尺寸.
最佳答案
这是给这只猫皮肤的一种方法：
HTML：
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.65) 0%,0) 20%,0) 80%,0.65) 100%
);
}
就个人而言,我不是(语义上)不必要的淡入淡出div的忠实粉丝,我确信如果没有它,可能会有更聪明的方法来做同样的效果,但它会起作用.
我只包含了webkit前缀规则,如果你想获得合法性,你需要添加其他供应商前缀.
小提琴here.
更新：
如果图像仅用作背景 – 就像链接示例中的情况一样 – 渐变和图像都可以在包含元素的css上设置：
.frame {
width: 315px;
height: 165px;
margin: 20px;
background-image: url(picture.jpg);
background-image: -webkit-linear-gradient(left,0.9) 0%,0.9) 100%
),url(picture.jpg);
}
...
减少麻烦,减少麻烦：new-style fiddle与供应商前缀和一切.
原文链接：https://www.f2er.com/css/427583.html
