Question

我想要在此网页顶部附近的大图片上使用的确切渐变：http://www.cohabs.com/

我可以使用它来获得非常接近的东西：

background: -webkit-linear-gradient(left, rgba(237,237,237,0) 0%, rgba(246,246,246,0.53) 53%, rgba(255,255,255,1) 100%), url(../images/firstImage.jpg) no-repeat;

但它并不完全相同，因为我的方法似乎在最左边的颜色上变暗了。

我确实尝试查看我链接的网站的来源，但我找不到任何有帮助的内容..

我用这个网站来创建我的渐变。

http://www.cssmatic.com/gradient-generator

Answer 1

我想这就是你要找的Codepen

除上述-webkit-linear-gradient外，还需要其他属性才能使其正常工作。

.container { position: relative; }
.container:before {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-image: -webkit-linear-gradient(right,hsla(0,0%,100%,.8),hsla(0,0%,100%,0) 40%);
    background-image: linear-gradient(270deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0) 40%);
    content: '';
}

以上标记应为

<div class="container">
  <img src="http://www.cohabs.com/files/library/assets/homapage/slider/Homepage_web.jpg?thumb=hero"> 
</div>

来自右

1 个答案: