题 如何在同一元素上组合背景图像和CSS3渐变?


我如何使用CSS3渐变为我的 background-color 然后申请一个 background-image 应用某种透明质地?


1065
2018-03-23 22:30


起源


注意:您也可以定位背景图像(15px中心)或以这种方式设置它的'repeat'属性(示例适用于Firefox 3.6+).some-class {background:url(“../ icon.png”)no-重复15px中心,-moz-linear-gradient(中心顶部,#FFFFFF,#DDDDD);} - Julien Bérubé
SVG 要么 SVG + CSS 可分别用于创建平面纹理(噪声)或纹理渐变。 - Clint Pachl


答案:


多个背景!

body {
  background: #eb01a5;
  background-image: 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/

层堆栈

应该注意,第一个定义的图像将位于堆栈的最顶层。在这种情况下,图像位于渐变的TOP上。

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

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

IE9及以上版本可以以相同的方式堆叠图像。您可以使用它为ie9创建渐变图像,但我个人不会。但是,在仅使用图像时要注意,即<9将忽略回退语句而不显示任何图像。包含渐变时不会发生这种情况。在这种情况下使用单个后备图像我建议使用Paul Irish的精彩 条件HTML元素 以及您的后备代码:

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

背景位置,尺码等

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

您也可以使用背景速记,但这会删除后备颜色和图像。

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

这同样适用于背景位置,背景重复等。


1329
2018-03-30 16:59



感谢您的回答,任何关于如何控制的想法 background-position 只为图像而不是渐变? - adardesign
谢谢你,这是一个很好的信息。 | @adardesign:使用背景速记。修改上面的例子,它将是:background:url(IMAGE_URL)no-repeat left top,[proper-gradient]; - RussellUresti
这很棒,但在IE 6-9中不起作用。有任何想法吗? - Zoolander
@adardesign:background:url(“../ images / icon.png”)无重复15px中心,-moz-linear-gradient(中心顶部,#FFFFFF,#DDDDD); / *注意15px中心,它会添加左侧填充15px并在icon.png * /中心垂直对齐 - Julien Bérubé
在chrome至少你可以控制多个图像的背景位置使用昏迷来分隔值..像这样.. background-position:0px 8px,0px 0px ... - Orlando


如果你也想设置 背景位置 对于你的形象,你可以使用这个:

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
    }
}

75
2017-11-24 16:02



这个页面上唯一一个适合我的人。我用它和普通的CSS一起使用它。我试过的所有其他人实际上都是用覆盖渐变颜色隐藏图像。 - Ska
@Ska - 然后反转顺序.z-index在这里工作相反。看到 stackoverflow.com/questions/14915542/...。 - Frank Conijn


要意识到的是,第一个定义的背景图像位于堆栈的最顶层。最后定义的图像将位于最下方。这意味着,要在图像后面有背景渐变,您需要:

  body {
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow);
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow);
  }

您还可以定义图像的背景位置和背景大小。 我整理了一篇关于你可以做的一些有趣事情的博客文章 CSS3渐变


39
2017-12-31 23:51



当W3C标准符号结束时,答案会更好。 - Volker E.
您的代码段不起作用 - redress
此代码似乎无法正常配合。我们只能看到stackOverflow图像,而不是它背后/之前的背景图像。 - Or A.
我认为-webkit-gradient可能已被弃用 stackoverflow.com/questions/10683364/... - alpalalpal
代码可能不起作用,但这是非常重要的一点。您可以重新排序背景元素的工作方式,但您必须将它们视为分层。如果您想在图像顶部放置渐变,请将其放在第一位,您可能希望我们使用RGBa,这样您就可以看到背后的图像: background-image: linear-gradient(rgba(22,22,22,0), rgba(22,22,22,0.6)), url('image.jpg'); - staypuftman


你可以简单地输入:

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


16
2017-12-21 18:35



这是唯一对我有用的解决方案(Firefox v57)。该 linear-gradient() 不得不来之前 url(),使用部分透明度必须用于渐变颜色 rgba()。其他任何东西只是使用列表中的第一个定义(好像第二个定义是后备,类似于如何 font-family 声明工作)。 - waldyrious
@waldyrious请注意,用户想要在线性渐变上应用一种透明的纹理,因此应首先显示图像,因为它应该在渐变上呈现 - Alex Guerrero
通过半透明度合成图像和渐变应该具有相同的效果,无论前面是哪一个。但是,您始终可以将渐变定义为具有一定的透明度,但是不能半透明的图像无法轻松/动态转换为以这种方式使用。这就是为什么我发现将梯度放在第一位的方法更普遍有用。 - waldyrious


我有一个实现,我需要将这项技术更进一步,并想要概述我的工作。下面的代码做了同样的事情,但使用了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负责交叉浏览器代码,现在我必须声明的是每个按钮的精灵位置。对于按钮活动和悬停状态,很容易扩展此主体。


13
2017-10-10 17:08





我的解决方案

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);

13
2018-03-15 12:39



在我的情况下,此解决方案适用于在图像顶部显示渐变,否则它将被图像隐藏。 - vizFlux


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

  1. 如果在渐变之前放置图像URL,则会显示此图像 以上 预期的梯度。

.background-gradient {
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  height: 500px;
  width: 500px;
}
<div class="background-gradient"></div>

  1. 如果在图像URL之前放置渐变,则会显示此图像  渐变。

.background-gradient {
  background: -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;
  background: -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  width: 500px;
  height: 500px;
}
<div class="background-gradient"></div>

这种技术与描述的多个背景图像相同 这里


8
2017-10-04 07:21





我用enjoycss做了一个例子

enter image description here

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

在enjoycss编辑器中,你可以结合任意数量的背景, 线性,重复线性,径向,重复径向,图像,颜色

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

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


5
2018-01-12 15:24