1.背景颜色
background-color 属性设置标签背景颜色。
快捷键:
bc + tab background-color : # fff ;
在模仿别的网页的时候,使用取色器,直接去获取颜色。
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 背景颜色属性</ title>
< style>
div {
height : 100px;
}
.box1 {
background : red;
}
.box2 {
background : rgb ( 100, 100, 100) ;
}
.box3 {
background : rgba ( 100, 100, 100, 0.5) ;
}
.box4 {
background : #AAAAAA;
}
.box5 {
background : #666;
}
</ style>
</ head>
< body>
< div class = " box1" > </ div>
< div class = " box2" > </ div>
< div class = " box3" > </ div>
< div class = " box4" > </ div>
< div class = " box5" > </ div>
</ body>
</ html>
2.背景图片
background-image : url ( "" ) ; 属性设置背图片。
url ( "" ) 中写图片地址,可以是网络 / 本地的。
注意:
如果图片的大小,没有标签大,那么会自动在水平和垂直方向平铺和填充。
页面中出现了图片,浏览器会再次发送请求获取图片。(开发者工具的Network中查看)
快捷键:
bi + tab background-image : url ( "" ) ;
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 背景图片属性</ title>
< style>
div {
height : 300px;
width : 300px;
background-image : url ( "image/yy.png" ) ;
}
</ style>
</ head>
< body>
< div> </ div>
</ body>
</ html>
3.背景平铺属性
background-repeat 属性设置图片平铺方式。
值:
repeat ; 默认,xy轴平铺。
repeat-x; x轴平铺(水平)。
repeat-y ; y轴平铺(垂直)。
no-repeat ; x , y轴都不平铺。
快捷键:
bgr + tab background-repeat :
应用场景:
为网页设置背景图片,图片越大,需要加载的时间越长,
通过平铺来降低图片的大小,提示网页的访问速度(有规律的图片才行。)
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 背景图片平铺属性</ title>
< style>
div {
height : 300px;
width : 300px;
}
.box1 {
background-image : url ( "image/yy.png" ) ;
background-repeat : repeat-x;
}
</ style>
</ head>
< body>
< div class = " box1" > </ div>
</ body>
</ html>
3.1应用场景
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 背景图片平铺应用场景</ title>
< style>
body {
background-image : url ( "image/bg1.jpg" ) ;
}
</ style>
</ head>
< body>
</ body>
</ html>
4.背景定位属性
background-position 属性设置背景图片的位置。
background-position 垂直方向 水平方向 ;
值: ( 默认为左上 )
1. 具体方位单词
水平方向:left center right
垂直方向:top cneter bottom
2. 具体像素(单元px,为 0 才能省略单位)
前一位值,从左往右移动xx px ;
后一位值,从上往徐下移动xx px ;
(值可以是负数,负数值以相反的方向移动)
注意:
同一个标签可以同时设置背景颜色和背景图片,如果颜色和图片同事存在,图片会覆盖背景颜色。
快捷键:
bp + tab background-position : 0 0 ;
4.1背景定位属性(值:单词)
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 背景定位属性(值:单词)</ title>
< style>
div {
height : 300px;
width : 300px;
background : #00ff19;
}
.box1 {
background-image : url ( "image/kn.jpg" ) ;
background-repeat : no-repeat;
background-position : top center;
}
.box2 {
background-image : url ( "image/ml.jpg" ) ;
background-repeat : no-repeat;
background-position : bottom right;
}
</ style>
</ head>
< body>
< div class = " box1" > </ div>
< hr>
< div class = " box2" > </ div>
</ body>
</ html>
4.2背景定位属性(值:数值)
图片移动以四边移动,中居中计算,上下移动 区域范围 / 2 -图片大小 / 2 ( px ) 。
图片 96 * 96 ,div300 * 300
居中计算:
300 / 2 + 96 / 2 = 150 - 48 = 102
上下移动 102 图片正中心居中。
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 背景定位属性(值:数值)</ title>
< style>
div {
height : 300px;
width : 300px;
background : red;
}
.box1 {
background-image : url ( "image/kn.jpg" ) ;
background-repeat : no-repeat;
background-position : 100px 0;
}
.box2 {
background-image : url ( "image/ml.jpg" ) ;
background-repeat : no-repeat;
background-position : -100px -100px;
}
</ style>
</ head>
< body>
< div class = " box1" > </ div>
< hr>
< div class = " box2" > </ div>
</ body>
</ html>
4.3应用场景
在拖动浏览器窗口时,网页始终将图片中间的重要信息给展示出来。
通常设置为 background-position : center top ;
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 背景定位属性(应用场景)</ title>
< style>
div {
height : 1080px;
}
.box1 {
background-image : url ( "image/lol.png" ) ;
background-position : center top;
}
.box2 {
background-image : url ( "image/csdn.gif" ) ;
background-position : center top;
}
</ style>
</ head>
< body>
< div class = " box1" > </ div>
< hr>
< div class = " box2" > </ div>
</ body>
</ html>
5.背景图片关联方式
background-attachment 属性设置背景图片与滚动条之间的关联方式。
背景图片与滚动条之间存在关联,背景图片默认会随着滚动条滚动。
值:
scroll ; 滚动,默认,背景图片会随着滚动条滚动。
fixed ; 固定,背景图片固定,不会随着滚动条滚动。
快捷键 :
ba + tab background-attachment : ;
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 背景图片关联方式</ title>
< style>
.box1 {
background-image : url ( "image/bg1.jpg" ) ;
background-repeat : no-repeat;
background-attachment : fixed;
}
</ style>
</ head>
< body>
< div class = " box1" >
x < br> x < br> x < br> x < br>
x < br> x < br> x < br> x < br>
x < br> x < br> x < br> x < br>
x < br> x < br> x < br> x < br>
x < br> x < br> x < br> x < br>
x < br> x < br> x < br> x < br>
x < br> x < br> x < br> x < br>
x < br> x < br> x < br> x < br>
x < br> x < br> x < br> x < br>
x < br> x < br> x < br> x < br>
x < br> x < br> x < br> x < br>
x < br> x < br> x < br> x < br>
</ div>
</ body>
</ html>
6.背景属性缩写
背景属性缩写格式:
background : 背景颜色 背景图片 平铺方式 关联方式 定位方式;
注意:
background中可以省略任何一个属性值。
快捷键:
gb + + tab
background : # fff url ( ) 0 0 no-repeat ;
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 背景属性缩写</ title>
< style>
div {
width : 300px;
height : 300px;
}
.box1 {
background-color : aqua;
background-image : url ( "image/yy.png" ) ;
background-repeat : no-repeat;
background-position : center center;
}
.box2 {
background : red url ( "image/yy.png" ) no-repeat center center;
}
</ style>
</ head>
< body>
< div class = " box1" > </ div>
< div class = " box2" > </ div>
</ body>
</ html>
7.背景图片与插入图片的区别
div . box$ * 2 + tab $自动生成数字 , * 几就生几个标签。
= =
< div class = "box1" > < / div >
< div class = "box2" > < / div >
背景图片:仅仅是一个装饰,不会占用位置,有定位属性可以控制图片位置。
插入图片:会占用位置,没有定位属性,控制图片位置难。搜索引擎能收录。
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 背景图片与插入图片的区别</ title>
< style>
div {
height : 300px;
width : 300px;
background-color : red;
}
.box1
{
background-image : url ( "image/yy.png" ) ;
background-repeat : no-repeat;
background-position : center center;
}
</ style>
</ head>
< body>
< div class = " box1" >
< p> 文字</ p>
</ div>
< br>
< div class = " box2" >
< img src = " image/yy.png" alt = " " >
< p> 文字</ p>
</ div>
</ body>
</ html>
8.练习
8.1练习1
两个图片重叠。
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 练习1</ title>
< style>
div {
width : 1285px;
height : 632px;
}
.box1 {
background-image : url ( "image/b1.png" ) ;
}
.box2 {
background-image : url ( "image/b2.png" ) ;
background-repeat : no-repeat;
background-position : center bottom;
}
</ style>
</ head>
< body>
< div class = " box1" >
< div class = " box2" > </ div>
</ div>
</ body>
</ html>
8.2练习2
两个图拼成一个图。
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 练习2</ title>
< style>
div {
height : 900px;
width : 1600px;
}
.box1 {
background-image : url ( "image/j1.jpg" ) ;
}
.box2 {
background-image : url ( "image/j2.jpg" ) ;
background-repeat : no-repeat;
background-position : 518px 0;
}
</ style>
</ head>
< body>
< div class = " box1" >
< div class = " box2" > </ div>
</ div>
</ body>
</ html>
9.CSS精灵图
CSS精灵图是一种图像合成技术。
(每一张图片都发送请求获取图片,将网页的图片合成一张大图,减少请求的次数。图片就增大了。)
作用:减少请求的次数,降低服务器处理压力。
CSS精灵图需要配合背景图片和背景定位来使用。
使用Adobe Fireworks CS6 工具 中的web切片工具快速找到图片的位置。
h<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> CSS精灵图</ title>
< style>
div {
height : 114px;
width : 114px;
background-image : url ( "image/jlt.jpg" ) ;
}
.box1 {
background-position : -583px -497px;
}
.box2 {
background-position : -185px -375px;
}
</ style>
</ head>
< body>
< div class = " box1" > </ div>
< div class = " box2" > </ div>
</ body>
</ html>
9.1练习
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 精灵图练习</ title>
< style>
div {
width : 140px;
height : 140px;
display : inline-block;
background-image : url ( "image/jlt2.jpg" ) ;
}
.box1 {
background-position : -1041px -1443px;
}
.box2 {
background-position : -1445px -1442px
}
.box3 {
background-position : -1832px -1644px;
}
.box4 {
background-position : -237px -245px;
}
</ style>
</ head>
< body>
< div class = " box1" > </ div>
< div class = " box2" > </ div>
< div class = " box3" > </ div>
< div class = " box4" > </ div>
</ body>
</ html>