我如何使用CSS3渐变为我的背景颜色,然后应用背景图像应用某种轻透明纹理?
当前回答
你可以使用多个背景: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");
}
其他回答
我有一个实现,我需要把这个技术更进一步,并想概述我的工作。下面的代码做同样的事情,但使用SASS、Bourbon和一个图像精灵。
@mixin sprite($position){
@include background(url('image.png') no-repeat ($position), linear-gradient(#color1, #color2));
}
a.button-1{
@include sprite(0 0);
}
a.button-2{
@include sprite (0 -20px);
}
a.button-2{
@include sprite (0 -40px);
}
SASS和Bourbon负责跨浏览器代码,现在我所要声明的就是每个按钮的精灵位置。很容易将此原则扩展到按钮的活动状态和悬停状态。
多个背景!
身体{ 背景:# 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等等。
我的解决方案:
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);
如果你有奇怪的错误下载背景图像使用W3C链接检查:https://validator.w3.org/checklink
以下是我使用的现代mixin (credit: PSA:不要使用梯度生成器):
.buttonAkc
{
.gradientBackground(@imageName: 'accept.png');
background-repeat: no-repeat !important;
background-position: center right, top left !important;
}
.buttonAkc:hover
{
.gradientBackgroundHover('accept.png');
}
.gradientBackground(@startColor: #fdfdfd, @endColor: #d9d9db, @imageName)
{
background-color: mix(@startColor, @endColor, 60%); // fallback
background-image: url("@{img-folder}/@{imageName}?v=@{version}"); // fallback
background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, -webkit-linear-gradient(top, @startColor 0%, @endColor 100%) no-repeat scroll left top; // Chrome 10-25, Safari 5.1-6
background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, linear-gradient(to bottom, @startColor 0%, @endColor 100%) no-repeat scroll left top;
}
.gradientBackgroundHover(@imageName)
{
.gradientBackground(#fdfdfd, #b5b6b9, @imageName);
}
使用背景-混合模式和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在所有现代浏览器上都可以运行