怎么样修改背景图片的大小
来源: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;就是覆盖的意思,将图片填充满盒子。
自己可以测试下,祝学习愉快!
相似问题