背景属性：样式中背景色和背景图片样式如何使用？

背景颜色background-color

初始值transparent ,在 CSS 中，transparent是一种颜色。

   <h1>background-color</h1>
    <style>
        .exampleone {
            background-color: teal;
            color: white;
        }
</style>
    <div class="exampleone">
        background-color
    </div>

背景色可以使用渐变色吗？

background-color: linear-gradient(rgba(0, 0, 255, 0.5);

background简写属性

从这个简写属性看各个子样式。

常规语法，有教程或书籍中有这样使用：

background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;
图片地址，position定位，重复策略样式。

这种语法可以，但不是推荐的最佳实践。

最佳实践，最好用好记的简写语法：

background-repeat background-position/background-size attachment;

示例：

background: no-repeat center/80% url("../img/image.png");

示例：

    <h1>background-image</h1>
    <style>
        .b1 {
            width: 500px;
            height: 500px;
            background: url("./b1.png"),
                url("./star.png"),no-repeat center/50% url("./cat.png");
        }
</style>
    <div class="b1">
        background-image
    </div>

现在依次看一下几个值。

background-repeat 属性

background-repeat 属性定义背景图像的重复方式。有下面几个值：

/* 单值语法 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* 双值语法: 水平horizontal | 垂直vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;

background-repeat: no-repeat round;

示例：

    <h1>background-repeat 属性</h1>
    <style>
        .one {
            background-repeat: round;
            background-image: url(./star.png);
            width: 490px;
            height: 400px;
            border: solid;
        }
</style>
    <ol>
        <li>
            <div class="one">&nbsp;</div>
        </li>
    </ol>

background-position属性

是对图片而言，background-position 为每一个背景图片设置初始位置。

有效值：

background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiple images */
background-position: 0 0, center;

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10

background-size

是对容器而言

有效值：

/* 关键字 */
background-size: cover
background-size: contain

/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

/* 逗号分隔的多个值：设置多重背景 */
background-size: auto, auto  // 不同于上面
background-size: 50%, 25%, 25%
background-size: 6px, auto, conta

背景图像background-image

可以使用多个图片，也可以使用线性填充材质。

background-image:url(图片路径);

    <h1>background-image</h1>
    <style>
        .b1 {
            width: 500px;
            height: 500px;
            background: url("./b1.png"),
                url("./star.png");
        }
</style>
    <div class="b1">
        background-image
    </div>

使用线性渐变作为背景

示例：

linear-gradient ( position, color1, color2,…)

    <h1>使用渐变背景</h1>
    <style>
        .b2 {
            width: 500px;
            height: 500px;
            background:
                linear-gradient(to bottom right, rgba(255, 255, 0, 0.5), rgba(0, 0, 255, 0.5)),
                url('./b1.png');
        }
</style>
    <div class="b2">
        background-image
    </div>

关于background简写样式，记住最佳实践里的语法就可以了。

background-repeat background-position/background-size attachment;

如果有其它的背景样式需要控制，可以单独再写一个样式控制它。对背景样式的控制，是可以通过加一个“，”逗号实现的。

2020年9月25日

【关于作者】

李艺，笔名“石桥码农，腾讯云最具价值专家（TVP），腾讯课堂启明星俱乐部成员，日行一课联合创始人兼 CTO，前 VIPKID 资深技术专家。国内早期闪客之一，具有 15 年以上互联网软件研发经验。

参与研发的音视频直播产品曾在腾讯 QQ 上线，为数千万人使用。从 0 到 1 创建课件标准，被团队誉为课件之父，官方评定为 Adobe 中国 15 位社区管理员之一。著有《小程序从0到1：微信全栈工程师一本通》等计算机图书，是极客时间视频畅销课《微信小程序全栈开发实战》的作者，知乎 Live 讲师，在行互联网技术专家。欢迎到“在行”找我一对一约聊。

10.1【前端开发】背景属性：样式中背景色和背景图片样式如何使用？