所以我正在嘗試向我的網站添加漸變文本，但是，當有背景顏色時它不起作用。
#maintitle {
background-image: linear-gradient(90deg, red, blue);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
display: inline-block;
}
* {
background-color: #1c232d;
font-family: 'Montserrat', sans-serif;
}<div class="title" id="maintitle">
<h1>
Welcome!
</h1>
</div>是什么原因造成的？我該如何解決？
uj5u.com熱心網友回復：
如果將漸變定義為同一元素的背景影像和 背景顏色，則如果它們都覆寫整個元素，則只會顯示其中一個（只要不添加剪輯，并且添加了剪輯，它們就會這樣做） , 兩者都被剪裁）。
對于額外的背景顏色，您需要添加一個額外的父元素來獲取該背景顏色：
（在編輯問題片段后注意：*選擇器也適用于#maintitle片段中的元素，因此雖然有兩個 CSS 規則，但其中的background-imageandbackground-color設定適用于同一個元素，上述內容也適用：背景顏色覆寫背景影像/漸變）
#maintitle {
background-image: linear-gradient(90deg, red, blue);
background-clip: text;
color: transparent;
display: inline-block;
}
.wrapper {
background-color: green;
}<div class="wrapper">
<div class="title" id="maintitle">
<h1>
Welcome!
</h1>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/442039.html
上一篇：裁剪和縮放SVG