当前位置：首页 > backend >正文

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

backend 2025/7/3 18:07:05

1.Emmet写法

2.背景属性

（1） background-color

（2） background-image

（3） background-repeat

（4）background-position

（5）background-size

（6）background-attachment

（7）background

2.显示模式

（1）作用

①块级元素

②行内元素

③行内块元素

（2）实例

3.转换显示模式

（1）属性名：display

（2）属性值

4.综合应用

1.Emmet写法

代码的简写方式，输入缩写VS Code会自动生成对应的代码

HTML

说明	标签结构	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)）等。

div {background-color: lightblue;
}

（2） `background-image`

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

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

（3） `background-repeat`

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

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（居中）；】。

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：背景图像会缩放以适应元素，图像全部可见，但可能会有空白区域。

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

（6）`background-attachment`

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

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

（7）`background`

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

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

2.显示模式

（1）作用

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

①块级元素

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

②行内元素

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

③行内块元素

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

（2）实例

<!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.综合应用

效果图：

源代码：

<!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>

查看全文

http://www.xdnf.cn/news/2416.html