学习CSS的background属性及其取值（实践）

it2024-11-19 4

CSS的背景属性

属性描述可用值background设置背景的所有控制选项其他背景属性可用值的集合background-color设置背景颜色命名颜色、十六进制颜色等background-image设置背景图片或渐变填充url(URL)或渐变属性值background-repeat设置背景图片的平铺方式repeaat、no-repeat、repeat-x、repeat-ybackground-attachment设置背景图片固定还是随内容滚动scroll、fixedbackground-position设置背景图片显示的起始位置【left、center、right】、【top、center、bottom】、【x%、y%】、【x-pos】【y-pos】

实践

注意：将下面代码中的图片路径换成自己的图片路径就可以实现相同效果

练习一

实现图文混排，图为背景

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> body { background-color: #eadece; background-image: url("./image/sina.jpg"); background-repeat: no-repeat; background-position: right bottom; /* background-attachment: fixed; */ } </style> </head> <body> <h3>十二生肖两两相对，六道轮回</h3> <p> 第一组是鼠和牛，老鼠代表智慧，牛代表勤奋，智慧和勤奋一定要紧密结合在一起，如果光有智慧不勤奋，那就是小聪明，光是勤奋不动脑筋，那就是愚蠢 </p> <p> 第二组是虎和兔，老虎代表勇猛，兔子代表谨慎，勇猛和谨慎只有结合在一起才能做到胆大心细，如果勇猛离开了谨慎就变成了鲁莽，而光有了心细就不可能有更多的收获…… </p> <p> 第三组是龙和蛇，龙代表刚猛，蛇代表柔韧，所谓刚者易折，而仅有柔的一面就容易失去主见，所以刚柔并济才是最好的选择…… </p> <p> 第四组是马和羊，马代表勇往直前，羊代表柔顺，如果一个人只顾直奔目标，不顾及周边环境，必然会和周边事物不断的磕碰，最后不见得会成功，如果光有柔顺，她可能连方向也没有，所以勇往直前的秉性要和和顺的性格结合在一起，才能超越 </p> <p> 第五组是猴和鸡，猴子代表灵活，善变能力强，鸡定时打鸣，代表恒定，如果光灵活但做不到恒定的话，再好的计划也会泡汤，所以要一方面要保持稳定性保持整体的和谐和秩序良好，另一方面又能在变通中前进，这才是最厉害的做法 </p> <p> 第六组也是最后一组那就是狗和猪，狗代表忠诚，猪代表随和，如果一个人太忠诚不懂得随和，就会排斥他人，反过来一个人太随和却不忠诚，那么这个人就会失去原则，所以一定要将忠诚和随和结合在一起，这样才能保持自己内心深处的平衡如果我们能够做到十二生肖两两相对原理中的任何一条，我们就应该能获得更多的 </p> </body> </html>

练习二

诗词的背景混排

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> .box { margin: 0 auto; border-radius: 30px; background-image: url("../ClassCode/水调歌头/yuese.jpg"); background-repeat: no-repeat; background-position: 50% 50%; height: 485px; width: 750px; } .shici { position: relative; top: 85px; text-align: center; font-weight: bold; } .title { font-size: 30px; color: #84deff; } .content { margin-top: 30px; line-height: 30px; color: #84deff; } </style> </head> <body> <div class="box">  <div class="shici"> <div class="title">水调歌头</div> <div class="content"> 明月几时有？把酒问青天。<br /> 不知天上宫阙，今夕是何年。<br /> 我欲乘风归去，又恐琼楼玉宇，高处不胜寒。 <br /> 起舞弄清影，何似在人间。 <br /> 转朱阁，低绮户，照无眠。 <br /> 　不应有恨，何事长向别时圆？ <br /> 人有悲欢离合，月有阴晴圆缺，此事古难全。 <br /> 但愿人长久，千里共婵娟。 <br /> ——苏轼 </div> </div> </div> </body> </html>

练习三

实现对联的排列效果

方法一

仅使用background-position来实现

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> .left { height: 927px; background: url("./left.jpg") no-repeat; /* background-position: ; */ background-position: left top; } .top { height: 169px; /* width: 488px; */ background: url("./top.jpg") no-repeat; background-position: center top; /* margin-top: -927px; */ } .right { height: 927px; /* width: 217px; */ background: url("./right.jpg") no-repeat; background-position: right top; /* margin-top: -200px; */ } .bottom { height: 375px; /* width: 374px; */ background: url("./bottom.jpg") no-repeat; background-position: center center; /* margin: -550px auto; */ } </style> </head> <body> <div class="left"> <div class="top"> <div class="right"></div> </div> <div class="bottom"></div> </div> </body> </html>

方法二

background属性和margin混合使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> .left { height: 927px; background: url("./left.jpg") no-repeat; /* background-position: left top; */ } .top { height: 169px; /* width: 488px; */ background: url("./top.jpg") no-repeat; background-position: center top; margin-top: -927px; } .right { height: 927px; /* width: 217px; */ background: url("./right.jpg") no-repeat; background-position: right top; margin-top: -169px; } .bottom { height: 375px; width: 374px; background: url("./bottom.jpg") no-repeat; background-position: center center; margin: -550px auto; } </style> </head> <body> <div class="box"> <div class="left"></div> <div class="top"></div> <div class="right"></div> <div class="bottom"></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" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> body { height: 90%; width: 90%; margin: 0 auto; } .box { margin-left: 400px; width: 500px; height: 500px; background-size: cover; background-image: url("https://mmbiz.qpic.cn/mmbiz_jpg/xrFYciaHL08BMqJHibZNtafa9nkBVlUr5qODWdSDKJgxCzCab49zGfngsibQ3ibG3wo43iaubNNgwGt2g7ANIicxwQcg/640?wx_fmt=jpeg"); } .box:hover { background-image: url("https://mmbiz.qpic.cn/mmbiz_jpg/xrFYciaHL08BMqJHibZNtafa9nkBVlUr5qX5cotNibgRrj4fKZkJ5vWD6LgOW0fCDIEdsSfKRMnZIpfDzDPVteL9g/640?wx_fmt=jpeg"); transition: all 5s; } </style> </head> <body> <div class="box"></div> </body> </html>

最新回复(0)