我如何使用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 */

其他回答

作为一个可靠的方法,你可以只做一个背景图像是500x5像素,在你的css使用:

background-img:url(bg.jpg) fixed repeat-x;
background:#<xxxxxx>;

其中xxxxxx对应与最终渐变颜色相匹配的颜色。

你也可以把它固定在屏幕的底部,让它与初始渐变颜色相匹配。

你可以使用多个背景:linear-gradient();调用,但是试试这个:

如果你想要图像完全融合在一起,而不是因为不同的HTTP请求而分别加载元素,那么可以使用这种技术。这里我们在同一个元素上同时加载两个东西…

只需要确保先将预渲染的32位透明png图像/纹理转换为base64字符串,并在background-image css调用中使用它(在本例中取代INSERTIMAGEBLOBHERE)。

我使用这种技术来融合晶圆外观纹理和其他图像数据,这些数据是用标准rgba透明/线性梯度css规则序列化的。比多层艺术和浪费HTTP请求更好,这对移动是不利的。所有内容都在客户端加载,不需要文件操作,但确实增加了文档字节大小。

 div.imgDiv   {
      background: linear-gradient(to right bottom, white, rgba(255,255,255,0.95), rgba(255,255,255,0.95), rgba(255,255,255,0.9), rgba(255,255,255,0.9), rgba(255,255,255,0.85), rgba(255,255,255,0.8) );
      background-image: url("data:image/png;base64,INSERTIMAGEBLOBHERE");
 }

我总是使用以下代码使其工作。这里有一些注意事项:

如果你把图片URL放在渐变前面,这张图片将会显示在渐变上面。

.background-gradient { 背景:url('http://trungk18.github.io/img/trungk18.png') no-repeat, -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%); 背景:url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-gradient(135deg, #6ec575 0, #3b8686 100%); 背景:url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%); 背景:url('http://trungk18.github.io/img/trungk18.png') no-repeat, -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%); 背景:url('http://trungk18.github.io/img/trungk18.png') no-repeat, -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%); 背景:url('http://trungk18.github.io/img/trungk18.png')无重复,线性梯度(135deg, #6ec575 0, #3b8686 100%); 身高:500 px; 宽度:500 px; } < div class = " background-gradient " > < / div >

如果你把渐变放在图片URL之前,这张图片会显示在渐变下面。

.background-gradient { 背景:-moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat; Background: -webkit-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat; 背景:-webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat; 背景:-o-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat; 背景:-ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat; 背景:线性梯度(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat; 宽度:500 px; 身高:500 px; } < div class = " background-gradient " > < / div >

这种技术就像我们在这里描述的有多个背景图像一样

多个背景!

身体{ 背景:# eb01a5; 背景图片:url(“IMAGE_URL”);/* fallback */ background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531);/* w3c */ }

这两行代码是任何不支持渐变的浏览器的备用代码。 请参阅下面仅对IE < 9的图像进行堆叠的说明。

第1行设置平坦的背景色。 第2行设置背景图像回退。

最后一行为能够处理它们的浏览器设置背景图像和渐变。

第3行适用于所有相对现代的浏览器。

目前几乎所有的浏览器都支持多背景图片和css背景。有关浏览器支持,请参阅http://caniuse.com/#feat=css-gradients。有关为什么不需要多个浏览器前缀的好文章,请参阅http://codepen.io/thebabydino/full/pjxVWp/

层堆栈

应该注意的是,第一个定义的图像将位于堆栈的最上面。在这种情况下,图像是在梯度的顶部。

有关背景分层的更多信息,请参阅http://www.w3.org/TR/css3-background/#layering。

仅堆叠图像(声明中没有梯度)对于IE < 9

IE9及以上版本可以以同样的方式堆叠图像。你可以用它来为ie9创建渐变图像,不过我个人不会这么做。但是需要注意的是,当只使用图像时,ie < 9将忽略回退语句,不显示任何图像。当包含渐变时,这种情况不会发生。在这种情况下,我建议使用Paul Irish的条件HTML元素和你的后退代码:

.lte9 #target{ background-image: url("IMAGE_URL"); }

背景位置,大小等。

应用于单个图像的其他属性也可以用逗号分隔。如果只提供了一个值,它将应用于所有堆叠图像,包括渐变。background-size: 40像素;将图像和梯度约束为40px的高度和宽度。然而使用background-size: 40px,覆盖;将图像设置为40px,渐变将覆盖该元素。若要只对一张图像应用设置,请为另一张图像设置默认值:background-position: 50%, 0 0;或者对于支持它的浏览器,使用initial: background-position: 50%, initial;

您也可以使用背景简写,但这将删除备用颜色和图像。

body{
    background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}

这同样适用于background-position, background-repeat等等。

你可以简单地输入:

背景:线性渐变( 到下, rgba (0, 0, 0, 0), rgba (0, 0, 0, 100) ), url(. . /图片/ image.jpg);