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

最新推荐文章于 2021-06-16 07:27:04 发布

夜雨Gecer

最新推荐文章于 2021-06-16 07:27:04 发布

阅读量1.9k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_39370093/article/details/100591210

版权

css 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

本文主要描述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>

夜雨Gecer

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
【css】背景图片-css3新增关于背景图片重复显示属性

本文主要描述css3关于背景图片重复显示新增的属性；什么也不设置时<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ ...
复制链接

扫一扫

专栏目录