【css】背景图片-css3新增关于背景图片重复显示属性

本文主要描述css3关于背景图片重复显示新增的属性;

什么也不设置时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 550px;
            height: 550px;
            background-image: url("./心.png");
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

新增 background-repeat: round 使图片在重复的同时能够完整的显示,同时也对图片大小进行调整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 550px;
            height: 550px;
            background-image: url("./心.png");
            /*改变图片大小以至于重复时能够完整的显示图片*/
            background-repeat: round;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

新增background-repeat: space;使图片在重复时完整显示,增加图片件的间隔,不拉伸图片;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 550px;
            height: 550px;
            background-image: url("./心.png");
            /*大小不变 在图片之前增加等量间距*/
            background-repeat: space;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>
发布了47 篇原创文章 · 获赞 4 · 访问量 7466

猜你喜欢

转载自blog.csdn.net/weixin_39370093/article/details/100591210