css背景缩放

最新推荐文章于 2024-07-08 12:47:09 发布

lxl211

最新推荐文章于 2024-07-08 12:47:09 发布

阅读量683

点赞数 1

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/lxllxl211/article/details/127474481

版权

css 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

/* background-size: 高度宽度; /
background-size: 500px 200px;
/ 只设置一个参数为等比缩放 /
background-size: 500px;
/ 里面的单位可以是% 相对于父盒子来说的 /
background-size: 90%;
/ cover完全覆盖盒子会导致显示不全 /
background-size: cover;
/ contain等比拉伸当宽度或高度铺满div盒子就不再拉伸了
可能会出现空白区域*/
background-size: contain;
代码例子：

<style>
        div{
            width: 500px;
            height: 500px;
            border: 1px solid red;
            background: url(images/dog.jpg) no-repeat;
            /*  background-size: 高度 宽度; */
            background-size: 500px 200px;
            /* 只设置一个参数为等比缩放 */
            background-size: 500px;
            /* 里面的单位可以是% 相对于父盒子来说的 */
            background-size: 90%;
            /* cover完全覆盖盒子 会导致显示不全 */
            background-size: cover;
            /* contain等比拉伸 当宽度或高度 铺满div盒子就不再拉伸了
            可能会出现空白区域*/
            background-size: contain;
        }
    </style>
</head>
<body>
    <div></div>
</body>