белый градиент изображения с правой

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>