Question

我无法用css解决我的问题。

body {
    background: url("http://subtlepatterns.com/patterns/gray_jean.png");    
    padding:0;
    height:100%; 
    font-family: 'Source Sans Pro', sans-serif;
}

.side-image {
    background: url("http://www.achtergronden.info/wp-content/uploads/Natuur-Landschap-achtergrond-23.jpg");    
    width: 200px;
    height: 1000px;
    float: right;
 }

HTML

<body>
    <div class="side-image">

    </div>
</body>

我想要的是图像会平滑地重叠到我的身体背景中。我想删除它们之间的那条强硬路线。我已经看过css渐变但我无法在强硬线上获得渐变。

我做错了什么？渐变是解决方案吗？还是有其他解决方案吗？

感谢您的帮助

Answer 1

您可以使用-webkit-mask-image和渐变来淡出图像。 http://jsfiddle.net/TRRG2/2/

-webkit-mask-image: -webkit-gradient(linear, left center, right center, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)))

只知道它只适用于现代浏览器。您可能还想查找非前缀版本以查看它们是否可用。

在图像和背景之间添加重叠

1 个答案: