html 图片边缘淡化,css – 如何淡出图像的边缘？

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

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,0,0.65) 0%,

rgba(0,0,0,0) 20%,

rgba(0,0,0,0) 80%,

rgba(0,0,0,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,

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);

}

...

Content...

减少麻烦,减少麻烦：new-style fiddle与供应商前缀和一切.