白色图像渐变从右

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>