继承背景下的颜色

Question

我想制作继承背景颜色的虚线按钮。 （但我真的希望能够在不更改破折号背景的情况下更改按钮颜色。） 这是我的代码：

body {
  font-family:"Open Sans", sans-serif;
}
.btn {
  display: inline-block;
  padding: 0.5em 0.8em;
  vertical-align: top;
  border-radius: 5px;
  position: relative;
}
.btn.red {
  background-color:#dd2c2c;
  color:#f4f4f4;
}
.btn.blue {
  background-color:#2c84dd;
  color:#f4f4f4;
}
.btn.dash {
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0) 10px,
    rgba(255, 255, 255, 0.2) 10px,
    rgba(255, 255, 255, 0.2) 20px),
    inherit;
 }

<div class="btn dash red">Red Button</div>
<div class="btn dash blue">Blue Button</div>

使用这段代码我看不到虚线部分。但如果我将“继承”更改为“真实”值（如#dd2c2c），它就可以了！我该如何做才能保留原始背景颜色值但带有虚线悬停？

Answer 1

由于

repeating-linear-gradient

创建图像，而不是颜色，因此您可以使用

background-image

设置它，并且您在第二类中定义的

background-color

也会生效。

body {
  font-family:"Open Sans", sans-serif;
}
.btn {
  display: inline-block;
  padding: 0.5em 0.8em;
  vertical-align: top;
  border-radius: 5px;
  position: relative;
}
.btn.red {
  background-color:#dd2c2c;
  color:#f4f4f4;
}
.btn.blue {
  background-color:#2c84dd;
  color:#f4f4f4;
}
.btn.dash {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0) 10px,
    rgba(255, 255, 255, 0.2) 10px,
    rgba(255, 255, 255, 0.2) 20px
  );
 }

<div class="btn dash red">Red Button</div>
<div class="btn dash blue">Blue Button</div>

在您的情况下它不起作用，因为这不是背景的正确格式：

  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0) 10px,
    rgba(255, 255, 255, 0.2) 10px,
    rgba(255, 255, 255, 0.2) 20px), /** remove the comma **/
    inherit
 }

这是正确的定义：

  background: inherit repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0) 10px,
    rgba(255, 255, 255, 0.2) 10px,
    rgba(255, 255, 255, 0.2) 20px);
 }

但是，在这种情况下，

background

比

background-color

“更强”，并且

inherit

将替换您定义的

background-color

。由于父级没有

background-color

，因此它也不起作用。

Answer 2

对于未来的访问：

如果您的目标是应用线性渐变，透明线与彩色线交替，您可以像这样简单地使用“透明”：

background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.2) 0,
    rgba(255, 255, 255, 0.2) 20px
);