背景图片：
<html>
<head>
<meta charset="UTF-8">
<title>背景图片</title>
<style>
body{
/*
流式布局
从左到右 从上到下
*/
height: 100%;
/*因为标签总是会尽最大努力占据最小高度
所以当body中内容时 高度为0 故将高度设置为100%*/
background-image: url(lry.jpg);
margin: 0;
/*因为body标签默认带有8px的外间距
所以设置高度为100%时 则会出现滚动条
所以将margin设为0去除滚动条*/
background-repeat: no-repeat;
/*背景图片小于标签尺寸时 背景图片会在两个放向上重复自己
直到填满整个空间 除非设置了background-repeat
还可在一个方向上重复
background-repeat: repeat-x
background-repeat: repear-y*/
background-color: red;
/*背景图片小于标签时，且背景图片不重复时
可以看到背景图片和颜色共存的 背景图片在背景颜色的上方*/
background-position: 50% 50%;
/*background-position样式可以决定从哪个位置开始绘制这张图片*/
/*如果使用百分比 计算方式（容器的宽 - 图片的宽）× 百分比 超出部分隐藏
（容器的高 - 图片的高）× 百分比 超出部分隐藏
如果仅规定了一个值 那另一个值为50% */
background-size: contain;
/*设置图片大小
如果只设置一个值（宽） 那另一个值为auto
如果使用百分比 计算方式为（图片的宽和高 × 百分比）*/
}
</style>
<body>
</body>
</html>图片精灵：
<html>
<head>
<meta charset="UTF-8">
<title>图片精灵</title>
<style>
/*body{
background-color: black;
}*/
/*方案一
span{
display 属性规定元素应该生成的框的类型
display: block;
width: 144.285px;
height: 144.285px;
background-image: url(icons.jpg);
background-position: -144.285px -144.285px;
显示第二行第二个图标
}
span>i{
display: none;
需要可以显示文字 不需要可以将中间文字隐藏
}*/
/*方案二
.icons{
display: block;
width: 144.285px;
height: 144.285px;
background-image: url(icons.jpg);
}
.r1c1{
background-position: -144.285px -144.285px;
}
.ric2{
background-position: -288.57px -144.285px;
}*/
/*方案三*/
/*可以随便的设置任意大小*/
/*.icons{
display: block;
width: 25px;
height: 25px;
background-image: url(icons.jpg);
background-size: 700% 700%;
}
.r1c1{
background-position: -50px -50px;
}
.r1c2{
background-position: -50px -100px;
}*/
</style>
<!--最终方案-->
<link rel="stylesheet" href="style.css">
<body>
<section>
<!--<span><i>方案一</i></span>-->
<span class="icons"></span>
<span class="icons r1c1"></span>
<span class="icons r1c2"></span>
<span class="icons r1c3"></span>
<span class="icons r1c4"></span>
<span class="icons r1c5"></span>
<span class="icons r1c6"></span>
<span class="icons r2c0"></span>
<span class="icons r2c1"></span>
<span class="icons r2c2"></span>
<span class="icons r2c3"></span>
<span class="icons r2c4"></span>
<span class="icons r2c5"></span>
<span class="icons r2c6"></span>
<span class="icons r3c0"></span>
<span class="icons r3c1"></span>
<span class="icons r3c2"></span>
<span class="icons r3c3"></span>
<span class="icons r3c4"></span>
<span class="icons r3c5"></span>
<span class="icons r3c6"></span>
<span class="icons r4c0"></span>
<span class="icons r4c1"></span>
<span class="icons r4c2"></span>
<span class="icons r4c3"></span>
<span class="icons r4c4"></span>
<span class="icons r4c5"></span>
<span class="icons r4c6"></span>
<span class="icons r5c0"></span>
<span class="icons r5c1"></span>
<span class="icons r5c2"></span>
<span class="icons r5c3"></span>
<span class="icons r5c4"></span>
<span class="icons r5c5"></span>
<span class="icons r5c6"></span>
<span class="icons r6c0"></span>
<span class="icons r6c1"></span>
<span class="icons r6c2"></span>
<span class="icons r6c3"></span>
<span class="icons r6c4"></span>
<span class="icons r6c5"></span>
<span class="icons r6c6"></span>
<span class="icons r7c0"></span>
<span class="icons r7c1"></span>
<span class="icons r7c2"></span>
<span class="icons r7c3"></span>
<span class="icons r7c4"></span>
<span class="icons r7c5"></span>
<span class="icons r7c6"></span>
</section>
</body>
</html>CSS：
body{
background-color: black;
}
section{
margin: 50px auto;
width: 400px;
position: relative;
}
/*方案一
span{
display 属性规定元素应该生成的框的类型
display: block;
width: 144.285px;
height: 144.285px;
background-image: url(icons.jpg);
background-position: -144.285px -144.285px;
显示第二行第二个图标
}
span>i{
display: none;
需要可以显示文字 不需要可以将中间文字隐藏
}*/
/*方案二
.icons{
display: block;
width: 144.285px;
height: 144.285px;
background-image: url(icons.jpg);
}
.r1c1{
background-position: -144.285px -144.285px;
}
.ric2{
background-position: -288.57px -144.285px;
}*/
/*方案三*/
/*可以随便的设置任意大小*/
.icons{
display: block;
width: 50px;
height: 50px;
background-image: url(icons.jpg);
background-size: 700% 700%;
}
.r1c1{
background-position: 0 -50px;
}
.r1c2{
background-position: 0 -100px;
}
.r1c3{
background-position: 0 -150px;
}
.r1c4{
background-position: 0 -200px;
}
.r1c5{
background-position: 0 -250px;
}
.r1c6{
background-position: 0 -300px;
}
.r2c0{
background-position: -50px 0;
position: absolute;
left: 50px;
top: 0;
}
.r2c1{
background-position: -50px -50px;
position: absolute;
left: 50px;
top: 50px;
}
.r2c2{
background-position: -50px -100px;
position: absolute;
left: 50px;
top: 100px;
}
.r2c3{
background-position: -50px -150px;
position: absolute;
left: 50px;
top: 150px;
}
.r2c4{
background-position: -50px -200px;
position: absolute;
left: 50px;
top: 200px;
}
.r2c5{
background-position: -50px -250px;
position: absolute;
left: 50px;
top: 250px;
}
.r2c6{
background-position: -50px -300px;
position: absolute;
left: 50px;
top: 300px;
}
.r3c0{
background-position: -100px 0px;
position: absolute;
left: 100px;
top: 0px;
}
.r3c1{
background-position: -100px -50px;
position: absolute;
left: 100px;
top: 50px;
}
.r3c2{
background-position: -100px -100px;
position: absolute;
left: 100px;
top: 100px;
}
.r3c3{
background-position: -100px -150px;
position: absolute;
left: 100px;
top: 150px;
}
.r3c4{
background-position: -100px -200px;
position: absolute;
left: 100px;
top: 200px;
}
.r3c5{
background-position: -100px -250px;
position: absolute;
left: 100px;
top: 250px;
}
.r3c6{
background-position: -100px -300px;
position: absolute;
left: 100px;
top: 300px;
}
.r4c0{
background-position: -150px 0px;
position: absolute;
left: 150px;
top: 0px;
}
.r4c1{
background-position: -150px -50px;
position: absolute;
left: 150px;
top: 50px;
}
.r4c2{
background-position: -150px -100px;
position: absolute;
left: 150px;
top: 100px;
}
.r4c3{
background-position: -150px -150px;
position: absolute;
left: 150px;
top: 150px;
}
.r4c4{
background-position: -150px -200px;
position: absolute;
left: 150px;
top: 200px;
}
.r4c5{
background-position: -150px -250px;
position: absolute;
left: 150px;
top: 250px;
}
.r4c6{
background-position: -150px -300px;
position: absolute;
left: 150px;
top: 300px;
}
.r5c0{
background-position: -200px 0px;
position: absolute;
left: 200px;
top: 0px;
}
.r5c1{
background-position: -200px -50px;
position: absolute;
left: 200px;
top: 50px;
}
.r5c2{
background-position: -200px -100px;
position: absolute;
left: 200px;
top: 100px;
}
.r5c3{
background-position: -200px -150px;
position: absolute;
left: 200px;
top: 150px;
}
.r5c4{
background-position: -200px -200px;
position: absolute;
left: 200px;
top: 200px;
}
.r5c5{
background-position: -200px -250px;
position: absolute;
left: 200px;
top: 250px;
}
.r5c6{
background-position: -200px -300px;
position: absolute;
left: 200px;
top: 300px;
}
.r6c0{
background-position: -250px 0px;
position: absolute;
left: 250px;
top: 0px;
}
.r6c1{
background-position: -250px -50px;
position: absolute;
left: 250px;
top: 50px;
}
.r6c2{
background-position: -250px -100px;
position: absolute;
left: 250px;
top: 100px;
}
.r6c3{
background-position: -250px -150px;
position: absolute;
left: 250px;
top: 150px;
}
.r6c4{
background-position: -250px -200px;
position: absolute;
left: 250px;
top: 200px;
}
.r6c5{
background-position: -250px -250px;
position: absolute;
left: 250px;
top: 250px;
}
.r6c6{
background-position: -250px -300px;
position: absolute;
left: 250px;
top: 300px;
}
.r7c0{
background-position: -300px 0px;
position: absolute;
left: 300px;
top: 0px;
}
.r7c1{
background-position: -300px -50px;
position: absolute;
left: 300px;
top: 50px;
}
.r7c2{
background-position: -300px -100px;
position: absolute;
left: 300px;
top: 100px;
}
.r7c3{
background-position: -300px -150px;
position: absolute;
left: 300px;
top: 150px;
}
.r7c4{
background-position: -300px -200px;
position: absolute;
left: 300px;
top: 200px;
}
.r7c5{
background-position: -300px -250px;
position: absolute;
left: 300px;
top: 250px;
}
.r7c6{
background-position: -300px -300px;
position: absolute;
left: 300px;
top: 300px;
}多重背景：
<html>
<head>
<meta charset="UTF-8">
<title>多重背景</title>
<style>
section{
margin: 50px;
height: 500px;
/*background-image: url(lry.jpg);
background-repeat: no-repeat;
background-color: red;
background-size: 95%;*/
background-image: url(lry.jpg), url(icons.jpg);
background-repeat: no-repeat;
background-position: 50%;
/*blend 混合 mode 模式 混合模式*/
background-blend-mode: multiply;
}
</style>
<body>
<section></section>
</body>
</html>背景图片位置：
<html>
<head>
<meta charset="UTF-8">
<title>背景图片位置</title>
<style>
p{
margin: 30px;
border: 20px dotted blue;
padding: 50px;
background-image: url(icons.jpg);
background-repeat: no-repeat;
/*默认情况下背景图片从边框左上角内部开始到右下角边框线外部*/
/*background-origin: border-box;*/
/*背景图片起始位置调整到边框线左上角 即边框盒子左上角*/
background-origin: content-box;
/*将背景图片起点位置调整到内容区左上角 即内容盒子左上角*/
/*background-position: -80px -80px;*/
background-clip: content-box;
/*将图片截止位置
content-box 背景被裁剪到内容框
border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
*/
}
</style>
<body>
<p>
这是一段落这是一段落这是一段落这是一段落这是一段落<br>
这是一段落这是一段落这是一段落这是一段落这是一段落<br>
这是一段落这是一段落这是一段落这是一段落这是一段落<br>
这是一段落这是一段落这是一段落这是一段落这是一段落<br>
</p>
</body>
</html>