背景颜色
如何设置标签的背景颜色：
在css中有一个background-color:属性，就是专门用来设置标签的背景颜色的。
取值：
具体单词/rgb/rgba/十六进制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景颜色</title>
<style>
div{
width: 500px;
height: 500px;
}
.box1{
background-color: red;
}
.box2{
background-color: rgb(0,255,0);
}
.box3{
background-color: rgba(0,0,255,0.7);
}
.box4{
background-color: #0ff;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
背景图片
如何设置背景图片：在css中有个background-image：url（）：的属性，就是专门用于设置背景图片的。
注意点：
- 图片的地址必须放在url()中，地址可以是网络地址，也可以是本地图片；
- 如果图片大小没有标签那么大，则会自动在水平和垂直方向平铺；
- 如果网页上出现了图片，那么浏览器会再次发送请求获取图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图片</title>
<style>
div{
width: 500px;
height: 500px;
}
.box1{
background-image: url(http://wx3.sinaimg.cn/thumb150/6b6e567cgy1fgri0zehocj20c80c80tq.jpg);
/*background-image: url(http://wx3.sinaimg.cn/thumb150/6b6e567cgy1fgri0zehocj20c80c80tq.jpg);*/
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
背景图片平铺：
在css中，background-image默认是水平和垂直方向平铺，如需要修改平铺方式，可以利用background-repeat属性来设置。
取值：
repeat：默认，在水平和垂直都需要平铺；
no-repeat：在水平和垂直方向都不需要平铺；
repeat－Ｘ：在水平方向进行平铺；
repeat－Ｙ：在垂直方向进行平铺；
应用场景：
可以通过背景图片的平铺，降低图片的大小，可以提升网页访问速度。
注意点： 同一个标签可以同时设置背景颜色和背景图片，如果其同时存在，背景图片会覆盖其所在位置的背景颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景平铺属性</title>
<style>
/*
div{
width: 500px;
height: 500px;
}
.box1{
background-image: url(images/girl.jpg);
background-repeat: repeat-y;
}
*/
/*
body{
background-image: url(images/bg2.jpg);
}
*/
div{
width: 980px;
height: 60px;
background-image: url(images/1.png);
}
</style>
</head>
<body>
背景定位
在css中，background-position用于控制背景图片的位置。
格式：
background－position：水平方向 垂直方向；
取值：
１. 具体方位名词；
水平方向：left／right／center
垂直方向：top／center／bottom
２. 具体的像素；
例如：background－position：100px 200px；
注意点：
１. 必须要写单位px；
２. 像素的取值可以为负数；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>36-背景定位属性</title>
<style>
div{
/*width: 500px;*/
height: 500px;
}
.box1{
/*background-color: red;*/
/*background-image: url(images/girl.jpg);*/
/*background-repeat: no-repeat;*/
/*background-position: left top;*/
/*background-position: right top;*/
/*background-position: right bottom;*/
/*background-position: left bottom;*/
/*background-position: center center;*/
/*background-position: left center;*/
/*background-position: center top;*/
/*background-position: 100px 0;*/
/*background-position: 100px 200px;*/
/*background-position: -100px -100px;*/
background-image: url(images/yxlm.jpg);
background-position: center top;
}
</style>
</head>
<body>
<div class="box1">
<!---->
</div>
</body>
</html>
背景属性缩写格式：
background：背景颜色 背景图片 平铺方式 关联方式 定
位方式
注意点：background属性中，任何一个属性都可以被省略。
背景关联方式：
默认情况下背景图片会随着滚动条的滚动而滚动，如果不想让背景图片随滚动调到的滚动而滚动，可以修改背景图片和滚动条的关联方式。
格式：
background－attachment：scroll／fixed
scroll:默认值，会随着滚动条的滚动而滚动
fixed：不会随着滚动条的滚动而滚动。
背景图片和插入图片的区别
- 背景图片仅仅是一个装饰，不会占用位置，插入的图片会占用位置；
- 背景图片有定位属性，所以可以很方便的控制图片的位置，插入图片没有，不好控制图片位置。
- 插入图片的语义比背景图片的语义要强，所以在企业开发中如果图片下被搜索引擎收录，那么推荐使用插入图片。
网友评论