background-size

u014378108

于 2023-12-22 09:22:02 发布

阅读量380

点赞数 7

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

本文链接：https://blog.csdn.net/u014378108/article/details/135134150

版权

css 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文详细解释了CSS中background属性的子属性如background-size、contain、cover的用法，以及它们如何影响图片的尺寸调整、重复和定位。特别关注了如何通过这些属性实现等比例缩放和填充背景图片。

摘要由CSDN通过智能技术生成

1： px px

2 %,%

3 auto

4 contain

5 cover

6 复合属性 background: color url repeat position / size origin clip6

.box{
        width: 200px;
        height: 200px;
        padding:50px;
        border:1px solid #000;
        font-size: 16px;
        background-image:url('xx.jpg');
        background-repeat: no-repeat;
        background-size: 100px 100px;
    }

background-size: 100px 100px;

图片调整到设置的大小，缩小或放大

background-size: 50% 100%;

image默认从padding开始显示，50%表示(padding+contenet)的50%

background-size: auto; 默认值

显示图片的真是大小

background:contain;等比例缩放填充图片

，使背景图片的宽或高，与容器的宽或高相等，再将完整
背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片。

background:cover;;等比例缩放,直到完全覆盖容器.图片会尽可能全的显示在元素上，但要
注意：背景图片有可能显示不完整。—— 相对比较好的选择.

contain:等比例缩放，图片全部显示，容器可能出现没背景的区域

cover:等比例缩放,让图片覆盖容器

background: color url repeat position / size origin clip

.box {
    width: 150px;
    height: 150px;
    padding: 50px;
    border: 1px solid #000;
    font-size: 16px;
    background: red url("sss") no-repeat;
}

width: 150px;
        height: 150px;
        padding:50px;
        border:1px solid #000;
        font-size: 16px;
        background: red url('https:/n1r.jpg!350x260') no-repeat 0 50px/50px 50px;