Можно ли использовать градиент над фоновым изображением 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