怎么样修改背景图片的大小

来源: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回答

好帮手慕星星

2018-11-18

经测试实现效果是可以的呢。

设置背景图片大小的属性是background-size,这是CSS3中的属性,在第二个阶段中《响应式开发与常用框架》会学习到。

如果设置属性值为100%,也就是background-size:100%;就是通过改变宽度,高度就会按照自身宽高比来缩放。

如果设置属性值为cover,也就是background-size:cover;就是覆盖的意思,将图片填充满盒子。

自己可以测试下,祝学习愉快!

0

0 学习 · 36712 问题

查看课程