老师，帮忙看看为什么文字部分也有颜色，哪里出了错
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>线性渐变</title>
<style type="text/css">
.block{width:100px;height:100px;}
.moren,.left_right,.angel{float:left;margin-left:30px;}
.content{overflow:hidden;}
.moren{background:-webkit-linear-gradient(yellow,red);}
.left_right{background:-webkit-linear-gradient(left,yellow,red);}
.angel{background:-webkit-linear-gradient(right bottom,yellow,red);}
/*此处写代码*/
</style>
</head>
<body>
<!--此处写代码-->
<div class="content">
<div class="moren">
<div>上下方向渐变</div>
<div class="block"></div>
</div>
<div class="left_right">
<div>左右方向渐变</div>
<div class="block"></div>
</div>
<div class="angel">
<div>对角方向渐变</div>
<div class="block"></div>
</div>
</div>
</html>
正在回答
同学，你好。
1、渐变效果实现的可以，但是没有考虑兼容性，还有一种方式，也可以参考：
2、你是说字体在渐变的块上面是吧？是因为你给外面的块设置的渐变背景，字体本身就是在这个块当中的，所以会出现你现在的情况：
如果想要让字体不在背景中的话，可以把字体放到外面，或者只给下面的块设置渐变背景，这两种方案都可以。自己尝试一下，也可以参考这个同学的实现方式https://class.imooc.com/course/qadetail/119191。
如果帮助到了你，欢迎采纳！
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星