Можете ли вы наложить прозрачный градиент CSS3 на фоновое изображение? - PullRequest
Новая
       39

Можете ли вы наложить прозрачный градиент CSS3 на фоновое изображение?

29 голосов
/ 08 ноября 2011

Я пытаюсь поместить градиент css3 поверх фонового изображения. Использование кода ниже помещает фоновое изображение поверх моего градиента, но я пытаюсь сделать это наоборот, поэтому градиент действует как маска сверху. 

url(images/darkwood.png),
-webkit-gradient(linear, 0 0, 0 100%, from(#EEF), to(#000)) 300px 50px no-repeat,
-webkit-gradient(linear, 0 0, 0 100%, from(#EFE), to(#000)) 0 0 no-repeat;
background: 
url(images/darkwood.png),
-moz-linear-gradient(#EEF, rgba(0,0,0,1)) 300px 50px no-repeat, 
-moz-linear-gradient(#EFE, rgba(0,0,0,1)) 0 0 no-repeat;

Спасибо за вашу помощь

Ответы [ 2 ]

51 голосов
/ 08 ноября 2011

Я сделал это для одного из моих сайтов, надеюсь, это работает для вас; 

body {
	margin: 0;
	padding: 0;
	background: url('https://i.stack.imgur.com/MUsp6.jpg') repeat;
}

body:before {
	content: " ";
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%);
}
18 голосов
/ 08 ноября 2011

Пример из этого ответа не будет работать с изменяемыми размерами div.

Ваш код будет работать нормально. Но, насколько я понимаю, CSS читает справа налево. Таким образом, вы должны использовать следующее: 

div {
    background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%), url('http://www.google.co.uk/logos/classicplus.png') repeat;
}

Пример: http://sapphion.com/2011/11/css3-background-gradient-on-top-of-an-image/

...