怎么样修改背景图片的大小
来源:2-6 编程练习
宝慕林842399
2018-11-17 16:40:56
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>背景</title> <style> /*此处写代码*/ .one1{width:640px; height:400px; background-image:url(http://climg.mukewang.com/58dc9d360001d65806500650.jpg); background-color:red; padding-top: 240px} .two2{text-align: center; font-weight: bold; font-size:20px; } </style> </head> <body> <div class="one1"> <div class="two2"> 《长歌行》 <br> <br>青青园中葵,朝露待日晞。 <br>阳春布德泽,万物生光辉。 <br>常恐秋节至,焜黄华叶衰。 <br>百川东到海,何时复西归。 <br>少壮不努力,老大徒伤悲。 <br> </div> </div> </body> </html>
问题1:我想把背景图片给全部显示出来,这时我得一个个输入px来试,有什么办法可以使px正常全部显示出来吗?
问题2:怎么样把背景图片按比例缩小,比如像img标签插入图片一样,当我只输入width之后,图片的height会自动按比例缩小,背景图片如何实现,不然背景图片太大了。
1回答
经测试实现效果是可以的呢。
设置背景图片大小的属性是background-size,这是CSS3中的属性,在第二个阶段中《响应式开发与常用框架》会学习到。
如果设置属性值为100%,也就是background-size:100%;就是通过改变宽度,高度就会按照自身宽高比来缩放。
如果设置属性值为cover,也就是background-size:cover;就是覆盖的意思,将图片填充满盒子。
自己可以测试下,祝学习愉快!
相似问题