Question

我有一个website，我试图在印度这个词上添加金色效果。我尝试了两个选项：canvas和webkit-gradient。画布的问题在于它不会出现在同一行上。我也尝试过类似this

的webkit-gradient

h1, h2  {
    color: #D5AD6D; /*if no support for background-clip*/
    background: -webkit-linear-gradient(transparent, transparent), 
    -webkit-linear-gradient(top, rgba(213,173,109,1) 0%, rgba(213,173,109,1) 26%, rgba(226,186,120,1) 35%, rgba(163,126,67,1) 45%,  rgba(145,112,59,1) 61%, rgba(213,173,109,1) 100%); 
background: -o-linear-gradient(transparent, transparent); 
    -webkit-background-clip: text;   
    -webkit-text-fill-color: transparent;
}

或甚至之后的部分，但文字阴影始终覆盖渐变。

提前致谢。

Answer 1

您的问题是由text-shadow上的h1设置的。

要修复它，您只需设置

即可

span {
  text-shadow: none;
}

@import url('https://fonts.googleapis.com/css?family=Miss+Fajardose');

span {
color: #D5AD6D; /*if no support for background-clip*/
background: -webkit-linear-gradient(transparent, transparent), 
-webkit-linear-gradient(top, rgba(213,173,109,1) 0%, rgba(213,173,109,1) 26%, rgba(226,186,120,1) 35%, rgba(163,126,67,1) 45%,  rgba(145,112,59,1) 61%, rgba(213,173,109,1) 100%); 
background: -o-linear-gradient(transparent, transparent); 
-webkit-background-clip: text;   
-webkit-text-fill-color: transparent;
} 

h1 {
  font-family: "Miss Fajardose", cursive;
  color: black;
  margin-top: 90px;
  padding-bottom: 30px;
  letter-spacing: 0px;
  font-size: 100px;
  font-weight: bold;
  /* Text shadow is causing the problem! */
  /*text-shadow: 2px 2px 2px #000;*/
}

<h1>Con Ilan a la <span>India</span></h1>

文本阴影覆盖webkit渐变

1 个答案: