具有background-clip属性的渐变文本在Mac Safari中像这样http://prntscr.com/mgd5tz一样混乱。这是我的跨度渐变文本代码
.text-grad {
background: -moz-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #97c74e), color-stop(100%, #2ab9a5));
background: -webkit-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
background: -o-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
background: -ms-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
background: linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-one', endColorstr='$color-two',GradientType=1 );
-webkit-background-clip: text;
-moz-background-clip: text;
-ms-background-clip: text;
-o-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
-ms-text-fill-color: transparent;
-o-text-fill-color: transparent;
text-fill-color: transparent;
opacity: 1;
z-index: 9;
}
<h2>Lorem ipsum <span class="text-grad"> deep understanding </span> of the project</h2>
答案 0 :(得分:0)
添加显示:内联块;可能有效
.text-grad {
display: inline-block;
background: -moz-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #97c74e), color-stop(100%, #2ab9a5));
background: -webkit-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
background: -o-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
background: -ms-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
background: linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-one', endColorstr='$color-two',GradientType=1 );
-webkit-background-clip: text;
-moz-background-clip: text;
-ms-background-clip: text;
-o-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
-ms-text-fill-color: transparent;
-o-text-fill-color: transparent;
text-fill-color: transparent;
opacity: 1;
z-index: 9;
}
<h2>Lorem ipsum <span class="text-grad"> deep</span> <span class="text-grad">understanding </span> of the project</h2>