【CSS】同色系背景

0005.jpg

image.png

条纹是由一个主色调（ #983439）和它的浅色变体所组成的。

CSS代码

body{
    background: #983439;
    background-image: repeating-linear-gradient(30deg, 
    rgba(255, 255, 255, .1) , 
    rgba(255, 255, 255, .1) 15px,
    transparent 0,
    transparent 30px);
}

首先是把主色调变成背景色，然后再做一个透明度比较高的白色条纹渐变。这个方法的好处是如果要修改主色调，只要修改一个地方就行了。

---

以下是常规做法，不建议使用！

CSS代码

background-image: 
    repeating-linear-gradient(30deg, 
        #983439, 
        #983439 15px, 
        rgba(163, 73, 77, .8) 0,
         rgba(163, 73, 77, .8) 30px);

这是常规的做法，如果要修改主色调，就要同时修改多个地方，维护起来很不方便。

---

渐变背景基础笔记

---

希望以上笔记对大家有帮助。
我的其他笔记在微信公众号：Rabbit_svip

qrcode_for_gh_6c5c0ec5e65b_258 (1).jpg