css背景

lxl211

已于 2023-02-02 13:18:54 修改

阅读量1.3k

点赞数

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

于 2023-01-29 11:56:11 首次发布

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

版权

css 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

1、背景颜色：半透明

<style>
        div{
            width: 1000px;
            height: 100px;
            /* 背景颜色半透明，其他文字不受影响 */
            background: rgba(0 ,0 ,0 ,0.3 );
        }
    </style>
</head>
<body>
    <div></div>
</body>

在这里插入图片描述

2、背景图

属性名: background-image (bgi)

属性值:
background-image: url( 图片的路径)

注意点:
背景图片中url中可以省略引号
背景图片默认是在水平和垂直方向平铺的背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的。

/* 背景平铺:当多个命令时，使用最后一个命令 /
background-repeat: no-repeat;
/ 不重复 /
background-repeat: repeat;
/ 默认重复 /
/ 沿着x轴平铺 /
background-repeat: repeat-x;
/ 沿着y轴平铺 */
background-repeat: repeat-y;

    <style>
        div {
            /* 背景颜色 */
            background-color: rgb(242, 180, 180);
            width: 1000px;
            height: 800px;

            /* 背景图片 */
            /* background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F1011%2F010QG05111%2F1F10Q05111-3.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664255809&t=b19847126fc34f5f63ca4c20afb4e0a4); */
            background-image: url(https://img2.baidu.com/it/u=383380894,3933217319&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333);
            max-width: 100%;
            min-height: 100%;

            /* 背景平铺:当多个命令时，使用最后一个命令 */
            background-repeat: no-repeat;
            /* 不重复 */
            background-repeat: repeat;
            /* 默认重复 */
            /* 沿着x轴平铺 */
            background-repeat: repeat-x;
            /* 沿着y轴平铺 */
            background-repeat: repeat-y;
        }
    </style>
</head>

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

默认完全平铺：
在这里插入图片描述
当background-repeat: no-repeat;不重复

当background-repeat: repeat-x;沿着x轴pingpu

当background-repeat: repeat-y;沿着y轴平铺

3、背景位置

    <style>
        .bj{
            width: 800px;
            height: 600px;
            background-color: pink;
            /* background: url(https://img2.baidu.com/it/u=383380894,3933217319&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333); */
            background-image: url(https://img2.baidu.com/it/u=383380894,3933217319&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333);
            
            /* 去掉重复 */
            background-repeat: no-repeat;
            /* 左上角对齐 */
            background-position: 0 0;  
        }
    </style>
</head>
<body>
    <div class="bj">
    </div>
</body

当有二个数时，先左右，再上下
当只有一个数时，如果是left、center、right，则另一个方向默认居中
如果是top、center、bottom，则另一个方向默认居中

当background-position: right;水平方向右对齐，竖直方向居中
在这里插入图片描述

当background-position: top ;水平方向居中，垂直方向置顶
在这里插入图片描述
正数：向右向下移动负数：向左向上移动
背景色和背景图只显示在盒子里面
例如：background-position: -100px -100px;

4、背景连写

    <style>
        div{
            width: 800px;
            height: 600px;
            /* 连写可以随意些
            background：颜色 图片 是否重复 位置 */
            background: pink url(https://img2.baidu.com/it/u=383380894,3933217319&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333) no-repeat center;
        }
    </style>
</head>
<body>
    <div></div>
</body>

在这里插入图片描述

5、img和背景的区别

需求:需要在网页中展示一张图片的效果?
方法一:直接写上img标签即可
img标签是一个标签，不设置宽高默认会以原尺寸显示
方法二:div标签+背景图片
需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签

6、精灵图背景
精灵图一般用行内标签— span 、b 、i

场景:项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
优点:减少服务器发送次数，减轻服务器的压力，提高页面加载速度
例如:需要在网页中展示8张小图片
8张小图片分别发送一发送8次
合成一张精灵图发送一发送1次

简单操作：
创建一个盒子设置盒子的尺寸和小图尺寸相同
1.将精灵图设置为盒子的背景图片
2.修改背景图位置
通过测量小图片左上角坐标，分别取负值设置给盒子的background-position: xy

背景大小 background-size
作用:设置背景图片的大小
语法: background-size: 宽度高度;取值:

取值	场景
数字+px	简单方便，常用
百分比	相对于当前盒子自身的宽高百分比
contain	包含，将背景图片等比例缩放，可能会出现空白
cover	覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白

     -->
    <style>
        .box1 {
            width: 60px;
            height: 60px;
            /* 盒子距离上下100px，左右水平居中对齐 */
            margin: 100px auto;
            background: url(../css5定位/images/sprites.png) no-repeat;
            /* 背景图片往左走182px */
            /* 背景图位置属性 */
            background-position: -182px 0;
            /*----------- 简写------------ */
            /* background: url(../css5定位/images/sprites.png) -182px 0; */

        }

        span{
            display: inline-block;
            width: 17px;
            height: 17px;
            /* background-color: pink; */
            background: url(./images/sprites.png) -141px -70px;
        }
        /* 如果精灵图小于父盒子 */
        b{
            width: 30px;
            height: 30px;
            display: inline-block;
            background: url(./images/sprites.png) -165px -70px ;
           
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <span></span>
    <b></b>
</body>