七天学会html5和css3之背景详细介绍分析（25）

最新推荐文章于 2021-12-15 16:37:04 发布

㼛思雨

最新推荐文章于 2021-12-15 16:37:04 发布

阅读量263

点赞数 1

分类专栏： css3基础100问文章标签： html5 css3

本文链接：https://blog.csdn.net/weixin_45147894/article/details/106559016

版权

CSS 背景(background)目标- 理解 - 背景的作用 - css背景图片和插入图片的区别- 应用 - 通过css背景属性，给页面元素添加背景样式 - 能设置不同的背景图片位置4.1 背景颜色(color)- 语法： background-color:颜色值; 默认的值是 transparent 透明的4.2 背景图片(image)- 语法：```cssbackground-image : none | url (url)`...

摘要由CSDN通过智能技术生成

CSS 背景(background)

目标

- 理解
- 背景的作用
- css背景图片和插入图片的区别
- 应用
- 通过css背景属性，给页面元素添加背景样式
- 能设置不同的背景图片位置

4.1 背景颜色(color)

- 语法：

background-color:颜色值; 默认的值是 transparent 透明的

4.2 背景图片(image)

- 语法：

```css
background-image : none | url (url)
```

| 参数 | 作用 |
| ---- | :----------------------------: |
| none | 无背景图（默认的） |
| url | 使用绝对或相对地址指定背景图像 |

`css
background-image : url(images/demo.png);

- 小技巧：我们提倡背景图片后面的地址，url不要加引号。


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.bg {
			width: 800px;
			height: 500px;
			background-color: pink;
			/*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/
			background-image: url(images/l.jpg);
		}
	</style>
</head>
<body>
	<div class="bg">
		12312312312312312312312312312
	</div>
</body>
</html>

4.3 背景平铺（repeat）

- 语法：

```css
background-repeat : repeat | no-repeat | repeat-x | repeat-y
```

| 参数 | 作用 |
| --------- | :----------------------------------: |
| repeat | 背景图像在纵向和横向上平铺（默认的） |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向平铺 |

最低0.47元/天解锁文章

㼛思雨

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
七天学会html5和css3之背景详细介绍分析（25）

CSS 背景(background)目标- 理解 - 背景的作用 - css背景图片和插入图片的区别- 应用 - 通过css背景属性，给页面元素添加背景样式 - 能设置不同的背景图片位置4.1 背景颜色(color)- 语法： background-color:颜色值; 默认的值是 transparent 透明的4.2 背景图片(image)- 语法：```cssbackground-image : none | url (url)`...
复制链接

扫一扫