你可以在背景图像上叠加透明的css3渐变吗？ [英] Can you overlay a transparent css3 gradient over a background image?

问题描述

我试图在背景图像的顶部放置一个css3渐变。使用下面的代码将一个背景图像放在我的渐变的顶部，但我想尝试另一种方式，所以渐变作为一个面具在顶部。

I'm trying to put a css3 gradient over the top of a background image. Using the code below puts a background image on top of my gradient, but i'm trying to do it the other way around, so the gradient acts as a mask on top.

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;

感谢您的帮助

推荐答案

我为我的一个网站这样做，希望它为你工作;

I have do this for one of my website, Hope it's work for you;

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

这篇关于你可以在背景图像上叠加透明的css3渐变吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！