背景图片：
<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>
