我如何使用CSS3渐变为我的背景颜色,然后应用背景图像应用某种轻透明纹理?


当前回答

我也是这么想的。虽然背景-颜色和背景-图像存在于对象内的单独层中——这意味着它们可以共存——但CSS渐变似乎利用了背景-图像层。

据我所知,border-image似乎比多背景有更广泛的支持,所以这可能是一种替代方法。

http://articles.sitepoint.com/article/css3-border-images

更新:更多的研究。看来佩特拉·格里戈罗娃在这里有东西在工作> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html

其他回答

如果你有奇怪的错误下载背景图像使用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);
}

多个背景!

身体{ 背景:# 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等等。

如果你必须在IE 9 (HTML 5 & HTML 4.01 Strict)中让渐变和背景图像一起工作,添加以下属性声明到你的css类中,它应该可以做到:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#000000', endColorstr='#ff00ff'), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[IMAGE_URL]', sizingMethod='crop');

注意,您使用了filter属性,并且progid有两个实例:[val],在用分号关闭属性值之前,用逗号分隔。这是小提琴。还要注意,当你看小提琴时,梯度延伸到圆角之外。我没有解决其他不使用圆角。还要注意,当在src [IMAGE_URL]属性中使用相对路径时,该路径是相对于文档页面而不是css文件(参见源代码)。

这篇文章(http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/)引导我找到了这个解决方案。它对特定于ie的CSS3非常有帮助。

你可以简单地输入:

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

这是一个渐变叠加的背景图片,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')`,