在背景下繼承顏色

我想製作繼承背景顏色的虛線按鈕。 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）它的作品！我該怎麼做，所以它保持原來的背景顏色值，但與虛線懸停？

來源

2017-06-11 Charles-François St-Cyr

由於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，因此無法正常工作。

來源

2017-06-11 19:55:50

在背景下繼承顏色

回答

相關問題