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

Я пытаюсь поместить градиент 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;

Спасибо за помощь

Ответ 1

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

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%);
}

Ответ 2

Вышеприведенный пример не будет работать с изменяемыми размерами 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/