Question

我遇到了CSS问题。

我有一个渐变，有多条指令使其与任何浏览器兼容。

background: no-repeat 20px center url("./img/pc.png"), -webkit-gradient(linear, left top, left bottom, from(#000000), to(#111111));
background: no-repeat 20px center url("./img/pc.png"), -webkit-linear-gradient(top, #000000, #111111);
background: no-repeat 20px center url("./img/pc.png"), -moz-linear-gradient(top, #000000, #111111);
background: no-repeat 20px center url("./img/pc.png"), -ms-linear-gradient(top, #000000, #111111);
background: no-repeat 20px center url("./img/pc.png"), -o-linear-gradient(top, #000000, #111111);
background: no-repeat 20px center url("./img/pc.png"), linear-gradient(to bottom, #000000, #111111);

如您所见，还有一个背景图像。现在，想象一下这个图像是否是内联的。复制和粘贴它会多次浪费太多空间。

有没有办法做这样的事情：

background: no-repeat 20px center url("./img/pc.png");
background: linear-gradient(to bottom, #000000, #111111);

但是没有用第二次调用（渐变）覆盖（和破坏）第一个属性（图像）？

由于

Answer 1

如果您不想重复使用CSS变量：

:root {
 --image:url("https://lorempixel.com/400/200/") center/100px no-repeat 
}

.box {
  height:200px;
  background: var(--image), -webkit-gradient(linear, left top, left bottom, from(#000000), to(#111111));
  background: var(--image), -webkit-linear-gradient(top, #000000, #111111);
  background: var(--image), -moz-linear-gradient(top, #000000, #111111);
  background: var(--image), -ms-linear-gradient(top, #000000, #111111);
  background: var(--image), -o-linear-gradient(top, #000000, #111111);
  background: var(--image), linear-gradient(to bottom, #000000, #111111);
}

<div class="box">
</div>

<div class="box" style="--image:url(https://lorempixel.com/400/400/) center/100px no-repeat ">
</div>

Answer 2

使用:after伪元素在图像背景上添加渐变。

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

div {
  width: 100%;
  height: 100%;
  background: no-repeat center center url(http://via.placeholder.com/350x150);
  position: relative;
}

div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #111111);
}

<div></div>

Answer 3

linear-gradient和url都会影响background-image，所以不，你不能同时使用这两者;第二个会覆盖第一个。

按以下速记顺序组合这两个规则时：

background: no-repeat 20px center url("./img/pc.png");
background: linear-gradient(to bottom, #000000, #111111);

仅第二个规则的background-image被应用;第一个速记规则中的其他规则被忽略：

background-image: linear-gradient(rgb(0, 0, 0), rgb(17, 17, 17));
background-position-x: initial;
background-position-y: initial;
background-repeat-x: initial;
background-repeat-y: initial;

但，可以通过手动将渐变指定为background-image来导致应用这些附加规则：

background-image: url(./img/pc.png); /* Only rule to get overriden */
background-image: linear-gradient(rgb(0, 0, 0), rgb(17, 17, 17));
background-position-x: 20px;
background-position-y: center;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;

这样，您的background-position-x，background-position-y，background-repeat-x和background-repeat-y规则可以与渐变结合使用......虽然您不可能同时使用这两个规则background-url规则同时适用于同一元素。

要同时显示图片和渐变，我建议您使用position: absolute使用两个位于彼此顶部的元素，并为每个元素应用一个background-image。渐变将位于顶部，并且透明，以便可以看到背景图像。

这可以在以下内容中看到：

＆＃13;

div {
  width: 100px;
  height: 100px;
  position: absolute;
}

.background {
  background-image: url("http://placehold.it/100");
}

.gradient {
  background-image: linear-gradient(to bottom, transparent, #111111);
}

＆＃13;

<div class="background"></div>
<div class="gradient"></div>

＆＃13;

添加背景属性而不覆盖现有属性

3 个答案: