css3 - 它是可以结合使用背景图像, CSS3渐变吗?

  显示原文与译文双语对照的内容

我想为我的background-color 使用CSS3渐变,然后应用一个 background-image 来应用一些透明的透明纹理。

这可能吗?

时间:

是的,是我的。


background: #6cab26;
background-image: url(IMAGE_URL);/* fallback */
background-image: url(IMAGE_URL), -webkit-gradient(linear, left top, left bottom, from(#6cab26), to(#6ceb86));/* Saf4+, Chrome */
background-image: url(IMAGE_URL), -webkit-linear-gradient(top, #6cab26, #6ceb86);/* Chrome 10+, Saf5.1+ */
background-image: url(IMAGE_URL), -moz-linear-gradient(top, #6cab26, #6ceb86);/* FF3.6+ */
background-image: url(IMAGE_URL), -o-linear-gradient(top, #6cab26, #6ceb86);/* Opera 11.10+ */
background-image: url(IMAGE_URL), linear-gradient(to bottom, #6cab26, #6ceb86);/* W3C */

这 2行是任何不做渐变的浏览器的回退。 仅在下面查看堆叠图像的注释 IE <9.

  • 第 1行设置了平铺背景颜色。
  • 第 2行设置背景图像回退。

其余部分为特定浏览器设置背景图像和渐变。

  • 第 3行用于非常旧的web kit浏览器。
  • 第 4行用于旧的web kit浏览器( Safari 5.1 -6,iOS Safari 5.1 -6.1 ) 。
  • 第 5行用于 Firefox 3.6,通过 15.
  • 第 6行用于 Opera 11.5 -12.
  • 第 7行适用于所有相对现代的浏览器。

查看 http://caniuse.com/#feat=css-gradients 以支持浏览器支持和前缀。

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

于 IE 相关 <9, 叠加的意象只是( 声明中没有渐变)

IE9和up可以同样的方式堆叠图像。 你可以用它来为ie9创建一个渐变图像,尽管我亲自。 但是,在仅使用图像时,IE <9将忽略回退语句,而不会显示任何图像。 在包含渐变时不会发生这种情况。 在这种情况下,使用单个回退图像,我建议使用爱尔兰条件HTML元素,以及你的回退代码:


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

背景位置,大小等。

应用于单个图像的其他属性也可能是逗号分隔的。 如果只提供 1个值,则将应用到包括渐变的所有堆叠图像。 background-size: 40px; 将同时约束图像和渐变到 40像素高度和宽度。 但是使用 background-size: 40px, cover; 将使图像 40像素,渐变将隐藏元素。

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

于你的图像,比你可以使用相关this,如果还想设置 背景位置 :


background-color: #444;//fallback
background: url('PATH-TO-IMG') center center no-repeat;//fallback

background: url('PATH-TO-IMG') center center no-repeat, -moz-linear-gradient(top, @startColor, @endColor);//FF 3.6+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor));//Safari 4+, Chrome 2+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-linear-gradient(top, @startColor, @endColor);//Safari 5.1+, Chrome 10+
background: url('PATH-TO-IMG') center center no-repeat, -o-linear-gradient(top, @startColor, @endColor);//Opera 11.10
background: url('PATH-TO-IMG') center center no-repeat, linear-gradient(to bottom, @startColor, @endColor);//Standard, IE10

或者你也可以创建一个 LESS mixin ( Bootstrap 风格):


#gradient {
. vertical-with-image(@startColor: #555, @endColor: #333, @image) {
 background-color: mix(@startColor, @endColor, 60%);//fallback
 background-image: @image;//fallback

 background: @image, -moz-linear-gradient(top, @startColor, @endColor);//FF 3.6+
 background: @image, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor));//Safari 4+, Chrome 2+
 background: @image, -webkit-linear-gradient(top, @startColor, @endColor);//Safari 5.1+, Chrome 10+
 background: @image, -o-linear-gradient(top, @startColor, @endColor);//Opera 11.10
 background: @image, linear-gradient(to bottom, @startColor, @endColor);//Standard, IE10
 }
}

要实现的一点是,第一个定义的背景图像在堆栈中最顶端。 最后定义的图像将最底端。 也就是说,要在图像后面有背景渐变,你需要:

body {
 background-image: 
 url("/images/myImage.png"),
 -webkit-gradient(linear, left top, left bottom,
 from(red),
 to(yellow)),
 -moz-linear-gradient(top,
 red, yellow);
}

你还可以为图像定义背景位置和背景大小。 我整理了一篇关于CSS3渐变的有趣文章: http://css3wizardry.com/2010/08/19/css3-gradients-and-patterns/

我有一个实现,我需要把这项技术更深入一步,并想概述我的工作。 下面的代码做同样的事情,但使用 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照顾 跨浏览器 代码,而我现在只需要声明的是每个子画面位置按钮。 对于按钮活动和悬停状态,很容易扩展这里主体。

我用enjoycss做了一个例子

enter image description here

http://enjoycss.com/5q#background

在enjoycss编辑器中,你可以 conbine,线性,repeating-linear,射线,repeating-radial,图像,颜色

你用GUI调整你的背景,它自动生成代码

代码在这里 http://enjoycss.com/5q/code/0/background#background

你可以简单地键入:


background: linear-gradient(
 to bottom,
 rgba(0,0,0, 0),
 rgba(0,0,0, 100)
 ),url(../images/image.jpg);

我也试图做同样的事情。 而background-color和background-image存在一个对象中分离的层--意义他们可以 co-exist -- CSS渐变似乎 co-opt background-image的层。

据我可以告诉,border-image似乎有更宽的支持比多个背景,所以也许这就是另外一种方法。

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

更新:更多的研究。 似乎 Petra Gregorova在这里工作 --> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html

下面是我创建的一个 MIXIN,用于处理人们可能喜欢使用的一切:


.background-gradient-and-image (@fallback, @imgUrl, @background-position-x, @background-position-y, @startColor, @endColor) {
 background: @fallback;
 background: url(@imgUrl) @background-position-x @background-position-y no-repeat;/* fallback */
 background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-gradient(linear, left top, left bottom, from(@startColor) @background-position-x @background-position-y no-repeat, to(@endColor));/* Saf4+, Chrome */
 background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-linear-gradient(top, @startColor, @endColor);/* Chrome 10+, Saf5.1+ */
 background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -moz-linear-gradient(top, @startColor, @endColor);/* FF3.6+ */
 background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -ms-linear-gradient(top, @startColor, @endColor);/* IE10 */
 background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -o-linear-gradient(top, @startColor, @endColor);/* Opera 11.10+ */
 background: url(@imgUrl) @background-position-x @background-position-y no-repeat, linear-gradient(top, @startColor, @endColor);/* W3C */
}

这可以像这样使用:


.background-gradient-and-image (#f3f3f3,"../images/backgrounds/community-background.jpg", left, top, #fafcfd, #f2f2f2);

希望你们能找到这个帮助。

为 @Gidgidonihah 寻找初始解决方案的信用。

在你 css use,作为确定方法方式,你可以马上做出一张背景图像即说 500, : x5像素


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

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

你也可以将它的修正到屏幕底部,并使它的与初始渐变颜色匹配。

如果你必须在 IE 9 ( HTML 5 & HTML 4.01严格) 中同时使用渐变和背景图像,请将以下属性声明添加到你的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-specific CSS3非常有用。

...