div渐变怎么实现？

Posted 2023-02-22

怎么设置渐变位置，像这样的

参考技术A Div实现界面的方法是加上一层画布，也就是H5新出的一种标签叫做画布标签，画布标签里面有渐变这种效果。 参考技术B div

background-image: linear-gradient(180deg,white 50%, red 50%);
参考技术C 文字渐变颜色，直接上代码，颜色自己看着换
.colorful
width: 80%;
background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #2f2), color-stop(0.15, #2ff), color-stop(0.3, #ff2), color-stop(0.45, #b6ff00), color-stop(0.6, #00ff21), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
-ms-background-clip: text;


<div class="colorful" style="position:absolute;margin-top:0px;margin-left:5px">

<marquee><h1 style="color:#ff0000;font-size:30px">XXXXXXXXXXXXXXX!</h1></marquee>
</div>