CSS3———linear-gradient() 线性渐变

线性渐变linear-gradient()

遇到了这样的css样式

body {
    height: 100%;
    background-color: #ffffff;
    background-image: url(images/overlay.png), linear-gradient(60deg, rgba(30, 159, 255, 0.17) 5%, rgba(255, 108, 96, 0.27)), url(images/bg.jpg);
    background-repeat: repeat,    no-repeat,    no-repeat;
    background-size: 100px 100px, cover,    cover;
    background-position: top left,    center center, bottom center;
    background-attachment: fixed,    fixed,    fixed;
}

其中

 linear-gradient(60deg, rgba(30, 159, 255, 0.17) 5%, rgba(255, 108, 96, 0.27))

用角度值指定渐变的方向(或角度)。
to left:设置渐变为从右到左。相当于: 270deg
to right:设置渐变从左到右。相当于: 90deg
to top:设置渐变从下到上。相当于: 0deg
to bottom:设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。

指从左到右进行两个颜色的线性渐变。

原文地址:https://www.cnblogs.com/tine/p/7685076.html