WEBSTORM前端 —— 第2章：CSS —— 第3节：背景属性与显示模式

|--------|--------------------------------------------------------|---------|
| 说明 | 标签结构 | Emmet |
| 类选择器 | <div class = "box">< /div > | 标签名.类名 |
| id选择器 | < div id ="box"></div> | 标签名#id名 |
| 同级标签 | <div></div><p></p> | div+p |
| 父子级标签 | <div><p></p></div> | div>p |
| 多个相同标签 | <span>1</span><span>2</span><span>3</span> | span*3 |
| 有内容的标签 | <div>内容</div> | div{内容} |

CSS：大多数简写方式为属性单词的首字母

2.背景属性

（1） `background-color`

作用：设定元素的背景颜色。
含义：背景颜色就是元素背后所显示的颜色。
用法：直接在 CSS 中为元素指定 background-color 属性。
属性值：可以是颜色名称（如 red、blue）、十六进制值（如 #FF0000）、RGB 值（如 rgb(255, 0, 0)）、RGBA 值（如 rgba(255, 0, 0, 0.5)）等。

css 复制代码

div {
    background-color: lightblue;
}

（2） `background-image`

作用：设定元素的背景图像。
含义：背景图像就是元素背后显示的图片。
用法：使用 background-image 属性并指定图像的 URL。
属性值：图像的 URL（如 url('image.jpg')），也可以使用线性渐变、径向渐变等。

css 复制代码

body {
    background-image: url('background.jpg');
}

（3） `background-repeat`

作用：定义背景图像的重复方式。（平铺方式）
含义：当背景图像尺寸小于元素时，可通过此属性决定图像如何重复填充。
用法：直接在 CSS 中为元素指定 background-repeat 属性。
属性值：
- repeat：默认值，背景图像在水平和垂直方向都重复（平铺，默认效果）。
- repeat-x：背景图像只在水平方向重复（水平方向平铺）。
- repeat-y：背景图像只在垂直方向重复（垂直方向平铺）。
- no-repeat：背景图像不重复（不平铺）。

css 复制代码

div {
    background-image: url('pattern.png');
    background-repeat: no-repeat;
}

（4）background-position

作用：设定背景图像的起始位置。
含义：可以指定背景图像相对于元素的起始位置。
用法：直接在 CSS 中为元素指定 background-position 属性。
属性值：可以是具体的长度值（如 10px 20px）、百分比值（如 50% 50%），也可以使用关键字【如 top（顶部）；bottom（底部）；left（左侧）；right（右部）；****center（居中）；】。

css 复制代码

div {
    background-image: url('icon.png');
    background-repeat: no-repeat;
    background-position: center;
}

（5）`background-size`

作用：设定背景图像的尺寸。
含义：可调整背景图像的大小以适应元素。
用法：直接在 CSS 中为元素指定 background-size 属性。
属性值：
- 具体的长度值（如 100px 200px）。
- 百分比值（如 50% 50%）。
- cover：背景图像会缩放以完全覆盖元素，可能会有部分图像被裁剪。
- contain：背景图像会缩放以适应元素，图像全部可见，但可能会有空白区域。

css 复制代码

div {
    background-image: url('big-image.jpg');
    background-size: cover;
}

（6）`background-attachment`

作用：设定背景图像是固定的还是随页面滚动。
含义：可以控制背景图像在页面滚动时的表现。
用法：直接在 CSS 中为元素指定 background-attachment 属性。
属性值：
- scroll：默认值，背景图像随页面滚动。
- fixed：背景图像固定，不随页面滚动。
- local：背景图像随元素内容滚动。

css 复制代码

body {
    background-image: url('parallax.jpg');
    background-attachment: fixed;
}

（7）`background`

作用：是一个简写属性，可同时设置多个背景属性。
含义：可以一次性设置背景颜色、图像、重复方式、位置等。
用法：直接在 CSS 中为元素指定 background 属性。
属性值 ：可以按照 background-color、background-image、background-repeat、background-attachment、background-position 的顺序指定值，中间用空格分隔。

css 复制代码

div {
    background: lightblue url('pattern.png') no-repeat fixed center;
}

2.显示模式

（1）作用

布局网页时，根据标签的显示模式选择合适的标签摆放内容

①块级元素

独占一行；
宽度默认是父级的100%；
添加宽高属性生效。

②行内元素

一行可显示多个；
设置宽高属性不生效；
宽高尺寸由内容撑开。

③行内块元素

一行可显示多个；
设置宽高属性生效；
宽高尺寸也可以由内容撑开。

（2）实例

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面</title>
    <style>
        .div1{
            background-color: brown;
            width: 100px;
            height: 100px;
        }
        .div2{
            background-color: orange;
            width: 100px;
            height: 100px;
        }
        /*行内：一行共存多个；尺寸由内容撑开；加宽高 不生效*/
        span{
            width: 200px;
            height: 200px;
        }
        .span1{
            background-color: brown;
        }
        .span2{
            background-color: orange;
        }
        /*行内块：一行共存多个；默认尺寸由内容撑开；加宽高生效*/
        img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<!--块元素-->
    <div class="div1">div标签1</div>
    <div class="div2">div标签2</div><br>
<!--行内元素-->
    <span class="span1">span标签1</span>
    <span class="span2">span标签2</span><br>
<!--行内块元素-->
    <img src="图像/灰太狼.png"/>
    <img src="图像/灰太狼.png"/>

</body>
</html>

效果图：

3.转换显示模式

（1）属性名：display

（2）属性值

①block：块级（常用）

②inline-block：行内块（常用）

③inline：行内

4.综合应用

效果图：

源代码：

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网页</title>
    <style>
        /*默认效果*/
        a {
            display: block;
            width: 200px;
            height: 80px;
            background-color: #0977d2;
            color: #fff;
            text-decoration: none;
            text-align: center;
            line-height: 80px;
            font-size: 20px;
        }
        /*鼠标悬停效果*/
        a:hover{
            background-color: #00bbff
        }
    </style>
</head>
<body>
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">Vue</a>
<a href="#">React</a>
</body>
</html>