CSS——（5）背景

最新推荐文章于 2024-02-29 06:24:39 发布

nonono吧

最新推荐文章于 2024-02-29 06:24:39 发布

阅读量339

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.youkuaiyun.com/ileopard/article/details/108089450

版权

前端专栏收录该内容

11 篇文章

订阅专栏

一、背景颜色和背景图片

主要有以下属性

background-color 背景颜色
background-image 背景图片（url(“图片路径”)）
background-repeat 背景是否重复
background-position 设置背景图片的位置
background-size 设置背景图片的大小
background-origin 背景图片的偏移量计算的原点
background-clip 设置背景图片的范围
background-attachment 背景图片是否随元素移动
background 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置，并且没有顺序要求。但是background-size必须卸载background-position的后面，并且使用 / 隔开。background-position/background-size background-origin必须写在background-clip的前面

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

.box1{
    width: 650px;
    height: 650px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    /* margin-bottom: 100px; */
    /* 
        overflow 会有下拉栏
    */
    /* overflow: auto; */

    /* 
        background-color 设置背景颜色
    */
    /* background-color: skyblue; */

    /* 
        background-image 设置背景图片
            - 可以同时设置背景图片和背景颜色，这样背景颜色将会称为图片的背景色
            - 如果背景的图片小于元素，则背景图片会自动再元素中平铺，将元素铺满
            - 如果背景图片大于元素，将会有部分背景无法完全显示
            - 如果背景图片和元素一样大，则会直接正常显示
    */
    background-image: url("../images/background.png");

    /* 
        background-repeat 用来设置背景的重复方式
            可选值：
                repeat 默认值，背景会沿着x轴 y轴方向重复
                repeat-x 沿着x轴方向重复
                repeat-y 沿着y轴方向重复
                no-repeat 背景图片不重复
    */
    background-repeat: no-repeat;

    /* 
        background-position 用来设置背景图片的位置
            设置方式：
                通过top left right bottom center 几个表示方位的词来设置背景图片
                    使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center

                通过偏移量来指定背景图片的位置：
                    水平方向的偏移量 垂直方向的偏移量
    */
    background-position: center center;
    /* background-position: -120px -40px; */

    /*
        设置背景图片的范围
            - background-clip
                可选值：
                    border-box 默认值，背景会出现在边框的下边
                    padding-box 背景不会出现在边框，只出现在内容区和内边距
                    content-box 背景只会出现在内容区
            
            - background-origin 背景图片的偏移量计算的原点
                可选值：
                    padding-box 默认值，background-position从内边距处开始计算
                    content-box 背景图片的偏移量从内容区处计算
                    border-box 背景图片的变量从边框处开始计算
    */
    /* background-origin: border-box; */
    background-clip: content-box;

    /* 
        background-size 设置背景图片的大小
            第一个值表示宽度
            第二个值表示高度
            - 如果只写一个，则第二个值默认是 auto

            cover 图片的比例不变，将元素铺满
            contain 图片的比例不变，将图片再元素中完整显示
    */
    background-size: contain;
    
}

.box2{
    width:100px;
    height: 100px;
    margin-left: 180px;
    margin-right: auto;

    background-image: url("../images/g.png");
    background-repeat: no-repeat;
    background-size: 62.5px 87px;
    /* background-position: 310px 50px; */
    /* background-position: top; */
    /* background-color: slateblue; */

    /* 
        background-attachment
            - 背景图片是否随元素移动
            - 可选值
                scroll 默认值 背景图片会跟随元素移动
                fixed 背景图片会固定再页面中，不会随元素移动
    */
    /* background-attachment: fixed; */
}