Я пытаюсь поместить градиент 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;
Спасибо за помощь
Я делаю это для одного из моих веб-сайтов, надеюсь, он сработает для вас;
body {
margin: 0;
padding: 0;
background: url('img/background.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%);
}
Вышеприведенный пример не будет работать с изменяемыми размерами 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/