前言
又是内容超级多的一天啊，多也要学完，今天学校三节课呢，自己学习的时间少了点了，所以拖到今天才发文。加油，坚持住！
一、css的常用样式-背景属性
1.背景颜色 background-color
background-color,作用在盒子区域内添加背景颜色进行修饰，在border及以内加载背景颜色。属性值有颜色名，颜色值。
代码如下（示例）：
.box {
width: 200px;
height: 200px;
padding: 50px;
margin: 50px;
border: 10px dashed red ;
background-color: rosybrown;
}
2.背景图片 background-image
background-image，作用是给盒子添加图片的背景修饰。属性值是url（图片路径）图片可加载在border以内及以上。
background-repeat：no-repeat。背景图片可加载在border以内。
代码如下（示例）：
background-image: url(images/meng.jpg);
3.背景重复 background-repeat
background-repeat，作用设置添加的背景图是否要在盒子内重复进行加载。根据属性值不同，有四种重复加载方式。搭配background-image使用的。
repeat，默认值，重复。
no-repeat，不重复。
repeat-x，水平方向重复加载。
repeat-y，垂直方向重复加载。
代码如下（示例）：
background-image: url(images/meng.jpg);
background-repeat: no-repeat;
4.背景定位 background-position
background-position，用于设置不同的图片在背景区域加载开始的位置。三种写法：单词表示法，像素表示法，百分比表示法，两个属性值之间用空格分隔开。
第一个属性值表示背景图片在水平方向上的位置。
（1）单词表示法：
水平方向：left center right
垂直方向：top center bottom
（2）像素表示法：
正代表向右向下，负代表向左向上。
（3）百分比表示法：
100%
水平方向代表，border以内的宽度减去图片的宽度。
垂直方向代表，border以内的高度减去图片的高度度。
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 300px;
padding: 30px;
border: 10px dashed red ;
margin: 50px;
/* background-color: rosybrown; */
background-image: url(../images/meng.jpg);
background-repeat: no-repeat;
background-position: right bottom ;
}
</style>
</head>
<body>
<div class="box">111</div>
</body>
</html>
效果展示：
5.背景附着 background-attachment
background-attachment，作用是背景图片是否随着页面或者盒子滚动而滚动。
scroll，背景图片与盒子保持相对不变，随着页面的滚动而滚动走。
fixed，背景图片定在浏览器窗口之上，不会随着页面滚动而滚动走。
代码如下（示例）：
body {
background-image: url(../images/bg4.jpg);
background-repeat: no-repeat;
background-position: center top;
/* background-attachment: scroll; */
background-attachment: fixed;
}
6.综合使用 background
对五个单一的属性进行和写。
代码如下（示例）：
background: url(../images/bg4.jpg) no-repeat center top lightblue scroll;
注意事项：
1.如果没有五个属性全部设置，没有设置的就按默认值自动加载。
2.可以用单一属性层叠综合属性的一部分。
二、背景属性的应用
1.替换插入图
文字隐藏的方法：
（1）将文字字号设置为零。（但有兼容问题，IE8以下浏览器不能用）
（2）text-indent，属性值负到很大时，文字就会走到盒子外部。
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
h1 {
width: 14
最低0.47元/天 解锁文章
2972
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
