零基础CSS入门教程(10)——背景图片平铺不平铺

1.任务目标

我们上一小节学习了如何插图背景图片,我们这一小节学习一下背景图片的平铺和不坪埔。

2.平铺

我们可以通过background-repeat属性来设置背景图的平铺方式。
什么叫平铺呢,就是图像在窗口上是如何铺设的,是横向一张一张的铺,还是不平铺只展示一张图片,还是纵向的一张一张的铺。
background-repeat设置背景位置,平铺。如果是repeat他会分成四块一样的也是默认平铺,repeat-x平行平铺两个,repeat-y上下平铺两个,而no-repeat他是取消平铺,只显示一个

代码演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
      
      
            width: 400px;
            height: 400px;
            background-color: aqua;
            
        }
        body{
      
      
            /*background-repeat设置背景位置,平铺。如果是repeat他会分成四块一样的也是默认平铺,repeat-x平行平铺两个,repeat-y上下平铺两个,而no-repeat他是取消平铺,只显示一个*/
            background-image: url(./1.gif);
            background-repeat: repeat-y;

        }
    </style>
</head>

<body>
    <div>你好吗</div>
</body>

</html>

效果如下
在这里插入图片描述

4.小结

我们本小节学习了图片的平铺和不平铺,我们以后对图片设置花样多了许多方法。

猜你喜欢

转载自blog.csdn.net/weixin_61808806/article/details/128236094
今日推荐