我如何使用CSS3渐变为我的背景颜色，然后应用背景图像应用某种轻透明纹理?
当前回答
我希望这是跨浏览器的:
(修改了从渐变编辑器的基础，黑色到透明的垂直渐变在图像的顶部)
background-image: url('YOURIMAGE.JPG');
background-image: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%),url('YOURIMAGE.JPG'); /* FF3.6-15 */
background-image: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%),url('YOURIMAGE.JPG'); /* Chrome10-25,Safari5.1-6 */
background-image: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%),url('YOURIMAGE.JPG'); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='YOURIMAGE.JPG', sizingMethod='crop'); /* IE6-9 */
其他回答
我的解决方案:
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);
这是一个渐变叠加的背景图片，26%是不透明度，7度是渐变位置
CSS梯度生成器
backgroundImage: `linear-gradient(7deg, rgba(2,0,36,1) 0%, rgba(39,17,68,1) 26%, rgba(10,19,20,0.49343487394957986) 100%), url('backgroundImg.jpeg')`,
使用背景-混合模式和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在所有现代浏览器上都可以运行
作为一个可靠的方法，你可以只做一个背景图像是500x5像素，在你的css使用:
background-img:url(bg.jpg) fixed repeat-x;
background:#<xxxxxx>;
其中xxxxxx对应与最终渐变颜色相匹配的颜色。
你也可以把它固定在屏幕的底部，让它与初始渐变颜色相匹配。
我希望这是跨浏览器的:
(修改了从渐变编辑器的基础，黑色到透明的垂直渐变在图像的顶部)
background-image: url('YOURIMAGE.JPG');
background-image: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%),url('YOURIMAGE.JPG'); /* FF3.6-15 */
background-image: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%),url('YOURIMAGE.JPG'); /* Chrome10-25,Safari5.1-6 */
background-image: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%),url('YOURIMAGE.JPG'); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='YOURIMAGE.JPG', sizingMethod='crop'); /* IE6-9 */
