我在互联网上找到了这个 jsfiddle。你们有谁知道如何将背景颜色从白色更改为渐变色？渐变颜色应该在每一行上“重新开始”。请在此图片中的“示例 2”中查看所需的愿望:http://www.managers.dk/css-text-background.jpg
http://jsfiddle.net/omgmog/g3MQf/
h1 { width:480px; font:bold 36px sans-serif; letter-spacing:-1px; color:#000; }
h1 {
background: #fff;
display:inline;
white-space: pre-line;
position: relative;
padding: 9px 0;
line-height: 54px;
-moz-box-shadow: -20px 0 0 #fff, 20px 0 0 #fff;
-webkit-box-shadow: -20px 0 0 #fff, 20px 0 0 #fff;
box-shadow: -20px 0 0 #fff, 20px 0 0 #fff;
}
谢谢!
最佳答案
我不相信有一种方法可以用纯 CSS 完成您正在寻找的东西，因为没有“换行”选择器。唯一的方法是通过将文本包装到 span 元素中来显式定义每一行。
body
{
padding:50px;
background:#fff;
}
h1
{
width:480px;
font:bold 36px sans-serif;
letter-spacing:-1px;
color:#000;
display:inline;
white-space: pre-line;
position: relative;
padding: 9px 0;
line-height: 54px;
}
h1 span
{
background: -moz-linear-gradient(left, rgba(148,199,247,1) 0%, rgba(32,124,229,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(148,199,247,1)), color-stop(100%, rgba(32,124,229,1)));
background: -webkit-linear-gradient(left, rgba(148,199,247,1) 0%, rgba(32,124,229,1) 100%);
background: -o-linear-gradient(left, rgba(148,199,247,1) 0%, rgba(32,124,229,1) 100%);
background: -ms-linear-gradient(left, rgba(148,199,247,1) 0%, rgba(32,124,229,1) 100%);
background: linear-gradient(to right, rgba(148,199,247,1) 0%, rgba(32,124,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c7f7', endColorstr='#207ce5', GradientType=1 );
}
header
{
width: 550px;
}<body>
<header>
<h1>
<span>Some dynamic HTML text on</span>
<span>several lines with a background</span>
<span>that suits well and some margins</span>
<span>around it.</span>
</h1>
</header>
</body>关于css - 如何为文本添加渐变背景(多行)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37026034/