前言
- 系列文章目录：
- 根据视频和PPT整理
- 视频及对应资料：
- HTML CSS
CSS 背景属性，可以给页面元素添加背景样式。可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
1 背景颜色
background-color 属性定义了元素的背景颜色。
语法：
默认值为：transparent（透明）
颜色值可以为：颜色单词 | 十六进制 | rgb值 | rgba值
background-color: 颜色值;
<body> <div class="demo1"></div> <div class="demo2"></div> <div class="demo3"></div> <div class="demo4"></div> <div class="demo5"></div> </body>
<style> div { display: inline-block; width: 100px; height: 100px; border: 1px black solid } .demo1 { /* 默认值 */ background-color: transparent; } .demo2 { /* 颜色单词 */ background-color: red; } .demo3 { /* 十六进行 */ background-color: #6666f3; } .demo4 { /* rgb值 */ background-color: rgb(221, 85, 85); } .demo5 { /* rgba值 最后一个值为透明度 */ background-color: rgba(245, 4, 4, 0.3); } </style>
2 背景图片
background-image 属性可以设置元素的背景图像。
语法：
background-image : none | url (url)
取值：
- none：无背景图片
- url(url)：背景图片的路径
背景图片后面的地址，千万不要忘记加 url()， 同时里面的路径不要加引号。
<body> <div class="demo1"></div> <div class="demo2"></div> <div class="demo3"></div> </body>
<style> div { display: inline-block; width: 300px; height: 300px; border: 1px solid black; } .demo1 { background-image: none; } .demo2 { background-image: url(./pic.jpeg); } .demo3 { /* 在设置背景图片的同时可以设置背景颜色 */ background-color: aqua; background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png); } </style>
3 背景平铺
在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。
语法：
background-repeat: repeat | no-repeat | repeat-x | repeat-y
- repeat：背景图片在纵向和横向上平铺(默认值)
- no-repeat：背景图片在纵向和横向上都不平铺
- repeat-x：背景图片在横向上平铺
- repeat-y：背景图片在纵向上平铺
<body> <div class="demo1"></div> <div class="demo2"></div> <div class="demo3"></div> <div class="demo4"></div> <div class="demo5"></div> </body>
<style> div { display: inline-block; width: 400px; height: 200px; border: 1px solid black; } .demo1 { background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png); } .demo2 { background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png); background-repeat: repeat; } .demo3 { background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png); background-repeat: no-repeat; } .demo4 { background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png); background-repeat: repeat-x; } .demo5 { background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png); background-repeat: repeat-y; } </style>
4 背景图片位置
利用 background-position 属性可以改变图片在背景中的位置。
语法：
background-position: x y;
- x：横方向
- y：纵方向
可以使用 方位名词 或者 精确单位
- x：left | center | right
- y：top | center | bottom
4.1 方位名词
<div class="demo1"></div>
div { display: inline-block; width: 400px; height: 200px; border: 1px solid black; } .demo1 { background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png); background-repeat: no-repeat; background-position: center center; }
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致，因为对于横向是left | center | right，对于纵向是top | center | bottom，可以根据单词区分出横向和纵向。
<div class="demo2"></div> <div class="demo3"></div>
.demo2 { background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png); background-repeat: no-repeat; background-position: left top; } .demo3 { background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png); background-repeat: no-repeat; background-position: top left; }
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
指定横向：
<div class="demo4"></div>
.demo4 { background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png); background-repeat: no-repeat; background-position: left; }
