How to add gradient background to text (multiple lines)
Question
I found this jsfiddle on the internet. Does anyone of you know how I can change the background color from white into a gradient color? The gradient color should "restart" on each new line. Please see desired wish on "example 2" in this image: 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;
}
Thanks!
3 answers
solution1
4 2016-05-04 11:29:20
I don't believe there is a way to accomplish what you are looking for in plain CSS since there is no "new line" selector. The only way to do it is to explicitly define each new line by wrapping the text into a span element.
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>
solution2
1 2016-05-04 11:42:14
Please check my updated answer. I have added background-attachment:fixed; to get the desired output.
h1 { width:480px; font:bold 28px sans-serif; letter-spacing:-1px; color:#fff; background: -webkit-linear-gradient(left, #085d9d 0%, #92d5ff 100%); background: -moz-linear-gradient(left, #085d9d 0%, #92d5ff 100%); background: -o-linear-gradient(left, #085d9d 0%, #92d5ff 100%); background: linear-gradient(to right, #085d9d 0%, #92d5ff 100%); background-attachment:fixed; display: inline; line-height: 50px; padding: 7px 3px; white-space: pre-wrap; }
<h1>Some dynamic HTML text on several lines with a background that suits well and some margins around it.</h1>
solution3
1 2016-05-04 13:11:11
If you're unfamiliar with gradients there are tools out there that will help you do it more visually. One such tool is http://www.colorzilla.com/gradient-editor/ which will allow you to visually build your gradient, then click a button to copy that code to be pasted into your CSS file. It will provide you with browser safe options for most of the main browsers. simply add it to your background CSS code and it should produce the result you requested.
I hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.