CSS3 文字渐变 求指导
上一个的补充没法显示（次奥）HTML<divclass="top_contact">12345678901</div>CSS.top_contact{width:320p...
上一个的 补充 没法 显示 （次奥）
HTML
<div class="top_contact">123 4567 8901</div>
CSS
.top_contact { width:320px; float:right; height:28px; font-size:28px; font-family:"Times New Roman", Times, serif; font-weight:bold; line-height:28px; margin-top:26px; letter-spacing:2px;
background:-moz-linear-gradient(top, #fb7f87, #bc0404);
background:-webkit-linear-gradient(top, #fb7f87, #bc0404);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fb7f87), color-stop(1, #bc0404));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb7f87', endColorstr='#bc0404', GradientType='0'); /*IE <9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#fb7f87, endColorstr=#bc0404)"; /*IE8+*/
}
渐变被应用到了 背景上
我想 吧渐变渲染在文字上
应该不是写 background 吧
该怎么写呢 展开
HTML
<div class="top_contact">123 4567 8901</div>
CSS
.top_contact { width:320px; float:right; height:28px; font-size:28px; font-family:"Times New Roman", Times, serif; font-weight:bold; line-height:28px; margin-top:26px; letter-spacing:2px;
background:-moz-linear-gradient(top, #fb7f87, #bc0404);
background:-webkit-linear-gradient(top, #fb7f87, #bc0404);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fb7f87), color-stop(1, #bc0404));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb7f87', endColorstr='#bc0404', GradientType='0'); /*IE <9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#fb7f87, endColorstr=#bc0404)"; /*IE8+*/
}
渐变被应用到了 背景上
我想 吧渐变渲染在文字上
应该不是写 background 吧
该怎么写呢 展开
5个回答
展开全部
说句实话啊，现在的静态页要求的是简单、快捷、高效，与其浪费那么多时间，不如直接用一张带渐变的图片不是更简单吗？即使你用CSS做好了，在IE6789,FF,CHROME等浏览器下面都确保兼容吗？不兼容的话用户体验不好，用户体验不好的话等于空。
-------------------------------
以上是个人观点，对不对希望楼主不要生气哈。针对渐变字体的话我确实不太清楚，就像你说的渐变图片我还是见过的。
-------------------------------
以上是个人观点，对不对希望楼主不要生气哈。针对渐变字体的话我确实不太清楚，就像你说的渐变图片我还是见过的。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
去谷歌下看，关键是你少了这两个样式：
-webkit-background-clip: text;
color: transparent;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style>
html, body, p {
margin: 0;
padding: 0;
}
p {
width: 700px;
height: 50px;
font-size: 40px;
font-weight: bold;
line-height: 50px;
text-align: center;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fb7f87), color-stop(1, #bc0404));
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<p>123 4567 8901</p>
</body>
</html>
-webkit-background-clip: text;
color: transparent;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style>
html, body, p {
margin: 0;
padding: 0;
}
p {
width: 700px;
height: 50px;
font-size: 40px;
font-weight: bold;
line-height: 50px;
text-align: center;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fb7f87), color-stop(1, #bc0404));
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<p>123 4567 8901</p>
</body>
</html>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
主要代码：
background: -webkit-linear-gradient(top, #f00, #ff0 50%, #0f0);
color: transparent;
-webkit-background-clip: text;
background: -webkit-linear-gradient(top, #f00, #ff0 50%, #0f0);
color: transparent;
-webkit-background-clip: text;
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个你多去W3C看下吧，先学好基础
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
