css背景图代码怎么写
短信预约 -IT技能 免费直播动态提醒
这篇文章主要讲解了“css背景图代码怎么写”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css背景图代码怎么写”吧！
1. css背景图
1.1 背景属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css 背景属性</title> <style> .c1 { width:600px; height:600px; border:solid 1px red; background-color: yellow; background-image:url("./images/xiao.jpg"); background-repeat:no-repeat; background-attachment: fixed; } .c2 { width:600px; height:600px; margin:10px 20px; border:solid 1px red; background: url("./images/xiao.jpg") no-repeat 50% 50%; } </style></head><body> <div class="c1"></div> <div class="c2"></div></body></html>
1.2 背景图片引入
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>背景图片的引入</title> <style> div.c1 {width:60px;height:60px;border:solid 1px gray;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:solid 1px red; } div.c2 { background: url("./images/xiao.jpg") no-repeat; background-size: 100% auto; } div.c3 { background: url("./images/game/map_19.gif") no-repeat 30px 80px, url("./images/game/map_20.gif") no-repeat 50px 50px, url("./images/game/map_18.gif") no-repeat 100px 50px, url("./images/game/map_14.gif") no-repeat 180px 100px, url("./images/game/map_03.gif"); } </style></head><body> <div class="c1"></div> <div class="c2 gg"></div> <div class="c3 gg"></div></body></html>
2. 相对_绝对_固定
2.1 相对定位
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定位:相对定位 relative</title> <style> .gg { width:200px; height:200px; border:solid 1px red; } .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 控制层叠关系: 值越大越在上层,值越小越在下层 left top right bottom z-index --> <div class="c1 gg"></div> <div class="c2 gg"></div> <div class="c3 gg"></div> <div class="c4 gg"></div></body></html>2.2 绝对定位
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定位:绝对定位 absolute</title> <style> .gg {width:200px;height:200px;border:solid 1px red;} .big { width:1000px; height:1000px; border:solid 1px red; margin:100px 220px; } .c1 { background:violet; position: relative; } .c2 { background:tan; position: absolute; top:0px; left:0px; } .c3 {background:blue;} .c4 {background:green;} </style></head><body> <!-- 绝对定位:参考点默认参考的是body 效果:脱离文档流,后面的内容自动补位 使用:绝对定位会参照父级的相对定位进行移动,如果父级中没有relative,相对于body进行定位; (1)把想要的父级元素变成relative (2)把要定位的元素变成 absolute --> <div class="big"> <div class="c1 gg"></div> <div class="c2 gg"></div> <div class="c3 gg"></div> <div class="c4 gg"></div> </div></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定位:绝对定位 absolute</title> <style> .gg {width:200px;height:200px;border:solid 1px red;} .big { width:1000px; height:1000px; border:solid 1px red; margin:100px 220px; } .c1 { background:violet; position: relative; } .c2 { background:tan; position: absolute; top:0px; left:0px; } .c3 {background:blue;} .c4 {background:green;} </style></head><body> <!-- 绝对定位:参考点默认参考的是body 效果:脱离文档流,后面的内容自动补位 使用:绝对定位会参照父级的相对定位进行移动,如果父级中没有relative,相对于body进行定位; (1)把想要的父级元素变成relative (2)把要定位的元素变成 absolute --> <div class="big"> <div class="c1 gg"></div> <div class="c2 gg"></div> <div class="c3 gg"></div> <div class="c4 gg"></div> </div></body></html>2.3 固定定位
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="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:solid 1px red; background-color: green; position: fixed; left:50%; margin-left:-250px; top:50%; margin-top:-300px; } img { position:fixed; bottom:20px; left:-100px; transition: all 1s ease 0.1s; } img:hover { left:0px; background-color: red; } </style></head><body> <img class="lazy" data-src="images/xiao.jpg"/> <div class="c1">我没动</div> <p>1111222333444</p></body></html>3. float浮动
3.1 display转换元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>display 转换元素</title> <style> div {display:inline;border:solid 1px red;width:1000px;height:20px;} span {display:block;width:100px;height:50px;border:solid 1px red;} a {display:inline-block;width:500px;height:30px;border:solid 1px red;} p {display:none;} </style></head><body> <!-- 元素的分类: 块状元素 : block 行内元素 : inline 行内块状元素 : inline-block --> <div>第一个div</div> <div>第二个div</div> <span>我是span1</span> <span>我是span2</span> <a href="#">我是链接1</a> <a href="#">我是链接2</a> <p>12345</p></body></html>3.2 float浮动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="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:solid 1px red;clear:both;} #a1 {float:left;width:100px;height:100px;border:solid 1px red;} #a2 {display:block;width:100px;height:100px;border:solid 1px red;background: teal;clear: both;} </style></head><body> <!-- # ###块状元素浮动: float:left 向左浮动 ,元素脱离原始文档流,后面的内容自动补齐; float:right 向右浮动 ,元素脱离原始文档流,后面的内容自动补齐; 目的: 让块状元素在一排显示 clear:both; 清除两边的浮动 --> <div class="content"> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> </div> <!-- # ###行内元素浮动: 如果对行内元素进行浮动: 默认会把行内元素升级成行内块状元素,可以设置宽和高 消除浮动产生的影响:clear:both; --> <div class="content2"> <a href="#" id="a1">点击我跳转1</a> <a href="#" id="a2">点击我跳转2</a> </div></body></html>4. html里面的bug
4.1 float内容塌陷问题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="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:solid 1px red;clear:both;} #a1 {float:left;width:100px;height:100px;border:solid 1px red;} #a2 {display:block;width:100px;height:100px;border:solid 1px red;background: teal;clear: both;} </style></head><body> <!-- # ###块状元素浮动: float:left 向左浮动 ,元素脱离原始文档流,后面的内容自动补齐; float:right 向右浮动 ,元素脱离原始文档流,后面的内容自动补齐; 目的: 让块状元素在一排显示 clear:both; 清除两边的浮动 --> <div class="content"> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> </div> <!-- # ###行内元素浮动: 如果对行内元素进行浮动: 默认会把行内元素升级成行内块状元素,可以设置宽和高 消除浮动产生的影响:clear:both; --> <div class="content2"> <a href="#" id="a1">点击我跳转1</a> <a href="#" id="a2">点击我跳转2</a> </div></body></html>4.2 margin-top失效问题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="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:solid 1px red;} .father {width:300px;height:300px;background: yellow;overflow: hidden;} .son {width:150px;height:150px;margin-top:50px;} </style></head><body> <!-- overflow: hidden; overflow auto 如果内容超出边框，会以下拉框的形式显示，不会溢出 --> <div class="box1"> sdfsf </div> <div class="father"> <div class="son">12</div> </div></body></html>4.3 overflow
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style> .test { overflow: hidden; width: 200px; height: 100px; background: #eee; } </style> </head> <body> <!-- overflow:hidden 对超出部分内容进行隐藏 --> <div class="test"> <p>苏打速度</p> <p>苏打速度</p> <p>苏打速度</p> <p>苏打速度</p> <p>苏打速度</p> </div> </body></html>感谢各位的阅读，以上就是“css背景图代码怎么写”的内容了，经过本文的学习后，相信大家对css背景图代码怎么写这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
