css背景图代码怎么写
导读：本文共7348字符，通常情况下阅读需要24分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 1. css背景图1.1 背景属性<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-w... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。1. css背景图
1.1 背景属性
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>css背景属性</title><style>.c1{/*具体写法*/width:600px;height:600px;border:solid1pxred;background-color:yellow;/*控制背景图*/background-image:url("./images/xiao.jpg");/*控制是否平铺repeat-xrepeat-yno-repeatrepeat(默认)*/background-repeat:no-repeat;/*控制背景图像的位置;参数1控制左右参数控制上下*//*background-position:50%50%;*//*固定背景图使用fixed了解*/background-attachment:fixed;}.c2{/*简写*/width:600px;height:600px;margin:10px20px;border:solid1pxred;/*图片是否平铺[图片位置]*/background:url("./images/xiao.jpg")no-repeat50%50%;}</style></head><body><divclass="c1"></div><divclass="c2"></div></body></html>
1.2 背景图片引入
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>背景图片的引入</title><style>/*鼠标滑过,点亮图片*/div.c1{width:60px;height:60px;border:solid1pxgray;background:url("./images/tag.jpg")no-repeat;}div.c1:hover{background:url("./images/tag.jpg")no-repeat;background-position:-312px-3.5px;}.gg{width:400px;height:400px;border:solid1pxred;}/*一张图片的导入*/div.c2{background:url("./images/xiao.jpg")no-repeat;/*参数1:宽参数2:高50px50px/100%100%*//*控制背景图像的尺寸大小background-size:100%100%;*/background-size:100%auto;}/*多张图片导入*/div.c3{background:url("./images/game/map_19.gif")no-repeat30px80px,url("./images/game/map_20.gif")no-repeat50px50px,url("./images/game/map_18.gif")no-repeat100px50px,url("./images/game/map_14.gif")no-repeat180px100px,url("./images/game/map_03.gif");}</style></head><body><divclass="c1"></div><divclass="c2gg"></div><divclass="c3gg"></div></body></html>
2. 相对_绝对_固定
2.1 相对定位
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>定位:相对定位relative</title><style>.gg{width:200px;height:200px;border:solid1pxred;}.c1{background:violet;}.c2{background:tan;position:relative;top:10px;left:100px;z-index:2;}.c3{background:blue;}.c4{background:green;}</style></head><body><!--相对定位:参考点是他自己本身,相对于原始的位置进行定位;如果添加了定位:无论是添加(相对,绝对,固定)属性,添加之后会增加额外的其他属性:z-index控制层叠关系:值越大越在上层,值越小越在下层lefttoprightbottomz-index--><divclass="c1gg"></div><divclass="c2gg"></div><divclass="c3gg"></div><divclass="c4gg"></div></body></html>2.2 绝对定位
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>定位:绝对定位absolute</title><style>.gg{width:200px;height:200px;border:solid1pxred;}.big{width:1000px;height:1000px;border:solid1pxred;margin:100px220px;}.c1{background:violet;/*无效*/position:relative;}.c2{background:tan;position:absolute;top:0px;left:0px;/*bottom:0px;right:0px;*//*z-index:-1;*/}.c3{background:blue;}.c4{background:green;}</style></head><body><!--绝对定位:参考点默认参考的是body效果:脱离文档流,后面的内容自动补位使用:绝对定位会参照父级的相对定位进行移动,如果父级中没有relative,相对于body进行定位;(1)把想要的父级元素变成relative(2)把要定位的元素变成absolute--><divclass="big"><divclass="c1gg"></div><divclass="c2gg"></div><divclass="c3gg"></div><divclass="c4gg"></div></div></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>定位:绝对定位absolute</title><style>.gg{width:200px;height:200px;border:solid1pxred;}.big{width:1000px;height:1000px;border:solid1pxred;margin:100px220px;}.c1{background:violet;/*无效*/position:relative;}.c2{background:tan;position:absolute;top:0px;left:0px;/*bottom:0px;right:0px;*//*z-index:-1;*/}.c3{background:blue;}.c4{background:green;}</style></head><body><!--绝对定位:参考点默认参考的是body效果:脱离文档流,后面的内容自动补位使用:绝对定位会参照父级的相对定位进行移动,如果父级中没有relative,相对于body进行定位;(1)把想要的父级元素变成relative(2)把要定位的元素变成absolute--><divclass="big"><divclass="c1gg"></div><divclass="c2gg"></div><divclass="c3gg"></div><divclass="c4gg"></div></div></body></html>2.3 固定定位
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>定位:固定定位fixed</title><style>/**号代表通配选择符,代表所有标签,默认标签中含有默认的间距,要在一开始的时候全部去掉;*/*{margin:0px;padding:0px;}body{height:2000px;}.c1{width:500px;height:600px;border:solid1pxred;background-color:green;position:fixed;left:50%;margin-left:-250px;top:50%;margin-top:-300px;}/*<'transition-property'>：检索或设置对象中的参与过渡的属性<'transition-duration'>：检索或设置对象过渡的持续时间<'transition-timing-function'>：检索或设置对象中过渡的动画类型<'transition-delay'>：检索或设置对象延迟过渡的时间*/img{position:fixed;bottom:20px;left:-100px;transition:all1sease0.1s;}img:hover{left:0px;background-color:red;}</style></head><body><imgsrc="images/xiao.jpg"/><divclass="c1">我没动</div><p>1111222333444</p></body></html>3. float浮动
3.1 display转换元素
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>display转换元素</title><style>div/*display:inline;转换成行内元素*/{display:inline;border:solid1pxred;width:1000px;height:20px;}span/*display:block;转换成块状元素*/{display:block;width:100px;height:50px;border:solid1pxred;}a/*display:inline-block;转换成行内块状元素*/{display:inline-block;width:500px;height:30px;border:solid1pxred;}p/*display:none隐藏元素*/{display:none;}</style></head><body><!--元素的分类:块状元素:block行内元素:inline行内块状元素:inline-block--><div>第一个div</div><div>第二个div</div><span>我是span1</span><span>我是span2</span><ahref="#">我是链接1</a><ahref="#">我是链接2</a><p>12345</p></body></html>3.2 float浮动
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>float浮动</title><style>.content{width:700px;clear:both;}.content.c1{background:red;width:100px;height:100px;float:left;}.content.c2{background:tan;width:100px;height:100px;float:left;}.content.c3{background:blue;width:100px;height:100px;float:left;}.content.c4{background:green;width:100px;height:100px;float:left;}.content2{width:700px;height:500px;border:solid1pxred;clear:both;}#a1{float:left;width:100px;height:100px;border:solid1pxred;}#a2{display:block;width:100px;height:100px;border:solid1pxred;background:teal;clear:both;}</style></head><body><!--####块状元素浮动:float:left向左浮动,元素脱离原始文档流,后面的内容自动补齐;float:right向右浮动,元素脱离原始文档流,后面的内容自动补齐;目的:让块状元素在一排显示clear:both;清除两边的浮动--><divclass="content"><divclass="c1"></div><divclass="c2"></div><divclass="c3"></div><divclass="c4"></div></div><!--####行内元素浮动:如果对行内元素进行浮动:默认会把行内元素升级成行内块状元素,可以设置宽和高消除浮动产生的影响:clear:both;--><divclass="content2"><ahref="#"id="a1">点击我跳转1</a><ahref="#"id="a2">点击我跳转2</a></div></body></html>4. html里面的bug
4.1 float内容塌陷问题
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>float浮动</title><style>.content{width:700px;clear:both;}.content.c1{background:red;width:100px;height:100px;float:left;}.content.c2{background:tan;width:100px;height:100px;float:left;}.content.c3{background:blue;width:100px;height:100px;float:left;}.content.c4{background:green;width:100px;height:100px;float:left;}.content2{width:700px;height:500px;border:solid1pxred;clear:both;}#a1{float:left;width:100px;height:100px;border:solid1pxred;}#a2{display:block;width:100px;height:100px;border:solid1pxred;background:teal;clear:both;}</style></head><body><!--####块状元素浮动:float:left向左浮动,元素脱离原始文档流,后面的内容自动补齐;float:right向右浮动,元素脱离原始文档流,后面的内容自动补齐;目的:让块状元素在一排显示clear:both;清除两边的浮动--><divclass="content"><divclass="c1"></div><divclass="c2"></div><divclass="c3"></div><divclass="c4"></div></div><!--####行内元素浮动:如果对行内元素进行浮动:默认会把行内元素升级成行内块状元素,可以设置宽和高消除浮动产生的影响:clear:both;--><divclass="content2"><ahref="#"id="a1">点击我跳转1</a><ahref="#"id="a2">点击我跳转2</a></div></body></html>4.2 margin-top失效问题
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>margin-top失效问题</title><style>*{margin:0px;padding:0px;}.box1{width:100px;height:100px;margin-top:10px;border:solid1pxred;}.father{width:300px;height:300px;background:yellow;overflow:hidden;}.son{width:150px;height:150px;margin-top:50px;}</style></head><body><!--overflow:hidden;overflowauto如果内容超出边框，会以下拉框的形式显示，不会溢出--><divclass="box1">sdfsf</div><divclass="father"><divclass="son">12</div></div></body></html>4.3 overflow
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><style>.test{overflow:hidden;width:200px;height:100px;background:#eee;}</style></head><body><!--overflow:hidden对超出部分内容进行隐藏--><divclass="test"><p>苏打速度</p><p>苏打速度</p><p>苏打速度</p><p>苏打速度</p><p>苏打速度</p></div></body></html> </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
css背景图代码怎么写的详细内容，希望对您有所帮助，信息来源于网络。