我如何使用CSS3渐变为我的背景颜色，然后应用背景图像应用某种轻透明纹理?
当前回答
我的解决方案:
background-image: url(IMAGE_URL); /* fallback */
background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(IMAGE_URL);
其他回答
你可以简单地输入:
背景:线性渐变( 到下, rgba (0, 0, 0, 0), rgba (0, 0, 0, 100) ), url(. . /图片/ image.jpg);
我用那种方法解决问题。我在HTML中定义渐变，在主体中定义背景图像
html { Background-image: -webkit-gradient(线性，左下，右上，颜色停止(0.31,rgb(227, 227, 227))，颜色停止(0.66,rgb(199, 199, 199))，颜色停止(0.83,rgb(184, 184, 184)); 背景-图像:-moz-linear-gradient(左下，rgb(227, 227, 227) 31%， rgb(199, 199, 199) 66%， rgb(184, 184, 184) 83%); 高度:100% ｝ 身体{ 背景:url(“http://www.skrenta.com/images/stackoverflow.jpg”); 高度:100% ｝
使用背景-混合模式和rgba混合背景图像和颜色
这是你需要的:
.myblendedbg {
background-image: url("some_image.png");
background-color: rgba(0, 0, 0, 0.85); /* use rgba for fine adjustments */
background-blend-mode: multiply;
}
如果你调整rgba颜色值的alpha值(在这个例子中是。85)，你可以控制透明度。
此外，背景-混合模式还有其他值，你可以用它来获得一些真正有创意的结果。
注:background-blend-mode: color;在火狐浏览器上不能运行，而multiply在所有现代浏览器上都可以运行
我的解决方案:
background-image: url(IMAGE_URL); /* fallback */
background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(IMAGE_URL);
我也是这么想的。虽然背景-颜色和背景-图像存在于对象内的单独层中——这意味着它们可以共存——但CSS渐变似乎利用了背景-图像层。
据我所知，border-image似乎比多背景有更广泛的支持，所以这可能是一种替代方法。
http://articles.sitepoint.com/article/css3-border-images
更新:更多的研究。看来佩特拉·格里戈罗娃在这里有东西在工作> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html
