在背景下继承颜色

问题描述：

我想制作继承背景颜色的虚线按钮。 Here what I want（但我真的希望能够改变按钮的颜色不改变划线背景。）下面的代码，我有：在背景下继承颜色

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）它的作品！我该怎么做，所以它保持原来的背景颜色值，但与虚线悬停？

答

由于repeating-linear-gradient创建图像，并且不是颜色，所以可以使用background-color进行设置，并且您在第2类中定义的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，因此无法正常工作。

在背景下继承颜色

相关推荐