css3学习---背景缩放background-size

最新推荐文章于 2022-10-23 14:25:06 发布

兰兰的风。。。

最新推荐文章于 2022-10-23 14:25:06 发布

阅读量722

点赞数

分类专栏： # css 文章标签：背景缩放

本文链接：https://blog.csdn.net/pilgrim_121/article/details/111476034

版权

css 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

规定背景图像的尺寸

background-size: 背景图片宽度 背景图片高度;

单位：长度|百分比（相对于父盒子来说）|cover|contain;
示例：在红色border的div里放入背景图片，不设置时，显示图片原来大小的样子。
在这里插入图片描述
代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 1000px;
            height: 600px;
            border: 1px solid red;
            /* 图片宽度是500*500 */
            background: url(imgs/girl.jpg) no-repeat;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

写2个参数：background-size: 500px 800px;
只写一个参数肯定是宽度高度省略了会等比例缩放
单位可以跟% 相对于父盒子来说
cover 等比例拉伸要完全覆盖div盒子可能有部分背景图片显示不全
contain 高度和宽度等比例拉伸当宽度或者高度铺满div盒子就不再进行拉伸了可能有部分空白区域

cover（相当于100%）：

在这里插入图片描述

contain

在这里插入图片描述

兰兰的风。。。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3学习---背景缩放background-size

规定背景图像的尺寸background-size: 背景图片宽度背景图片高度;单位：长度|百分比（相对于父盒子来说）|cover|contain;示例：在红色border的div里放入背景图片，不设置时，显示图片原来大小的样子。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content.
复制链接

扫一扫