首页 CSS

# 应用场景：

1. 双色背景
2. 通过变量控制 div 容器内占满多少（常用于电量，加载，容量等场景）

# 实现方式一：通过背景图片和 background-size 属性来控制

这种方式简单方便，缺点是只能通过图片来做，背景色 background-size 不生效。
并且注意 background-size 属性需要放在 background 之后才生效。

l
<html>
<head>
<style>
#example1 {
    border: 2px solid black;
    padding: 25px;
    background: url(mountain.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#example2 {
    border: 2px solid black;
    padding: 25px;
    background: url(mountain.jpg);
    background-repeat: no-repeat;
    background-size: 100% 23.8%;
    background-position:bottom
}
</style>
</head>
<body>
    <div id="example1">
        满背景
    </div>
    <div id="example1">
        双色背景
    </div>
</body>

# 实现方式二：通过 linear-gradient 属性实现

linear-gradient:
第一个参数：方向 (可以为角度)
第二至多个参数：颜色占比 (可有可无) 至下一个参数颜色渐变

s
//背景色调整,上部分白,下部分黄
background: linear-gradient(to bottom, white 0%, white 75%, #F49602 75%, #F49602 100%);

效果：

s
//背景色一半白一半黄
background: linear-gradient(to right, white 0%, white 50%, #F49602 50%, #F49602 100%);

效果：

s
//背景色45度区分一半白一半黄
background: linear-gradient(45deg, white 0%,white50%, #F49602 50%, #F49602 100%);

效果：

s
//背景色由白变黄
background: linear-gradient(to right, white 0%, #F49602 100%);

效果：