Можно ли использовать градиент над фоновым изображением CSS?

Question

Я пытаюсь получить div с синим фоновым изображением шириной 500 пикселей. Затем я пытаюсь сделать градиент белым в самом левом углу от div, и когда он идет вправо, фоновое изображение медленно видно

Answer 1

Этот код CSS будет полезен, чтобы сделать его градиентным

.gradient {
    width: 200px;
    height: 200px;

    background: #999; /* for non-css3 browsers */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */ 
}

Используйте вышеупомянутый CSS в HTML, используя класс

<div class="gradient">
    gradient box
</div>

Answer 2

На самом деле я только что опубликовал нечто похожее на другой вопрос, но это применимо и в этом случае. Вот оно в действии:

http://sassmeister.com/gist/3528cb23d3e831231949

И CSS для достижения этого эффекта:

.hero {
 width: 100%;
 height: 500px;
 background: url("http://placesheen.com/1200/500") center center no-repeat;
 background-size: cover;
 }
.hero:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 508px;
background-image: linear-gradient(rgba(255, 255, 255, 0.2), white);
}

Конечно, обязательно добавьте правильные префиксы вендоров, чтобы они были совместимы с разными браузерами. И если вы хотите изменить направление градиента, вы измените значения градиента.

HTML:

<div class="hero">
    You could put content here if you want
</div>

Подробнее о градиентах: http://www.w3schools.com/css/css3_gradients.asp