结合CSS背景线性渐变

Question

如何将这条线合并到两个单独的css类中？

background: url('image1.png') center 50% no-repeat, url('image2.png') 100% 100% no-repeat, linear-gradient(#000000, #ffffff);

特别是我需要一个不同的 CSS 类用于 linear-gradient

类似...

.a {
   background-image: url('image1.png');
   background-position: center 50%;
   background-repeat: no-repeat;
   background-image: url('image2.png');
   background-position: 100% 100%;
   background-repeat: no-repeat;
}

.b {
   background-image: linear-gradient(#000000, #ffffff);
}

<div class="a b"></div>

谢谢。

Answer 1

您可以依赖 CSS 变量并执行以下操作：

:root {
 /* The default gradient is transparent */
 --c:linear-gradient(transparent,transparent)
}

.a,.c {
  height:150px;
  width:150px;
  display:inline-block;
  background-image:var(--c),url(https://lorempixel.com/400/200/);
  background-size:auto,cover;
}

.c {
  background-image:
  radial-gradient(circle at center,pink 20%,transparent 30%),
  var(--c),
  url(https://lorempixel.com/400/400/);
}
.b {
 --c:linear-gradient(red,transparent)
}
.d {
 --c:linear-gradient(to right,blue,transparent)
}

<div class="a">
</div>

<div class="a b">
</div>

<div class="c d">
</div>

<div class="a d">
</div>

更新

另一个想法是使用 old 伪元素技巧，但这仅在渐变应位于顶层或底层时才有效：

.a,.c {
  height:150px;
  width:150px;
  display:inline-block;
  background-image:url(https://lorempixel.com/400/200/);
  background-size:cover;
}

.c {
  background-image:url(https://lorempixel.com/400/400/);
}
.b,.d {
  position:relative;
  z-index:0;
}
.b:before,.d:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
  background:linear-gradient(red,transparent);
}
.d:before {
 background:linear-gradient(to right,blue,transparent);
}

<div class="a">
</div>

<div class="a b">
</div>

<div class="c d">
</div>

<div class="a d">
</div>