CSS设置背景颜色拼接 (一半黑一半白) 条纹渐变

2024-07-13 10:41| 来源: 网络整理| 查看: 265

首先下面是用到的css样式线性渐变这个属性我还说不明白我就简单的使用一下有兴趣的搜索CSS线性渐变就OK

background-image: linear-gradient(direction, color-stop1, color-stop2, …);

微信小程序都能用哈

1.拼接 (一半黑一半白)

黑白拼接背景 html代码如下

html{ height: 100%; background-image: linear-gradient(to bottom, #000 50%, #FFF 0); }

2.条纹很简单的就是高度改为25% 想要条纹更密就把高度减小就好了在这里插入图片描述 html代码如下

html{ height:25%; background-image: linear-gradient(to bottom, #000 50%, #FFF 0); }

3.渐变背景展示渐变我更改了渐变起始方向简单说就是竖着了。

html代码如下

html{ height:100%; background-image: linear-gradient(to right, #000, #FFF); }

完了掰~

【本文地址】

今日新闻