玩转CSS背景（从零基础到应用）

最新推荐文章于 2024-07-13 11:50:40 发布

非科班程序猿

最新推荐文章于 2024-07-13 11:50:40 发布

阅读量169

点赞数

分类专栏：笔记文章标签： css css3

本文链接：https://blog.csdn.net/tjlcy2019/article/details/106432296

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

知识点

1.background-color添加背景颜色
2.background-image 添加背景图片
如果图片大于容器，那么默认就从容器左上角开始放置
（图片大小远远大于600px*600px）

 div {
            width: 600px;
            height: 600px;
            background-image: url(../jQuery/1.jpg);
        }

浏览器中显示：
在这里插入图片描述
原图：

如果图片小于容器，那么默认会平铺

div {
            width: 600px;
            height: 600px;
            background-image: url(../jQuery/yinyue.jpg);
        }

（图片大小远远小于600px *600px）
浏览器中显示：
在这里插入图片描述
原图：

3.background-repeat设置背景平铺
不重复：no-repeat

div {
            width: 600px;
            height: 600px;
            background-image: url(../jQuery/yinyue.jpg);
            background-repeat:no-repeat;
        }

浏览器显示：
在这里插入图片描述
将图片进行缩放之后再平铺： round CSS3新增
图片不缩放，只会在图片之间产生相同的间距值：space CSS3新增
4.background-attachment设置在滚动容器的背景的行为
背景图片的位置固定不变：fixed
当滚动容器时，背景图片也会跟随滚动：scroll
local CSS3新增
scroll 和 local 的区别：
local：背景图片会跟随内容一起滚动
scroll：背景图片不会跟随内容一起滚动
5.background-size 设置背景图片大小 CSS3新增
有效解决前面图片过大而只显示图片的左上角
宽度高度或宽度 auto：
建议：在使用前确定图片宽高比与容器宽高比是否一致，否则会造成图片变形

div {
            width: 510px;
            height: 350px;
            border: 2px solid skyblue;
            background-image: url(../jQuery/1.jpg);
            background-size: 510px 350px;
        }

此时浏览器中完整的显示出完整的图片
在这里插入图片描述
设置百分比 （参照父容器可放置内容区域的百分比）：

div {
            width: 510px;
            height: 350px;
            border: 2px solid skyblue;
            background-image: url(../jQuery/1.jpg);
            background-size: 50%;
           
        }

width和height各自都乘50%的大小为背景图片的大小
浏览器中显示：
在这里插入图片描述
按比例调整图片大小，使用图片宽高自适应整个元素的背景区域：contain
图片大于容器有可能造成容器空白区域，将图片缩小

div {
            width: 210px;
            height: 650px;
            border: 2px solid skyblue;
            background-image: url(../jQuery/1.jpg);
            background-size: contain;
            background-repeat: no-repeat;
        }

在这里插入图片描述
图片小于容器也有可能造成容器空白区域，将图片放大

div {
            width: 310px;
            height: 450px;
            border: 2px solid skyblue;
            background-image: url(yinyue.jpg);
            background-size: contain;
            background-repeat: no-repeat;
        }

在这里插入图片描述
cover刚好与contain相反
背景图片会按比例缩放自适应整个背景区域，如果背景区域不足以包含所有背景图片，图片内容会溢出。
图片大于容器：等比例缩小，会填满整个背景区域，有可能造成图片的某些区域不可见

div {
            width: 500px;
            height: 150px;
            border: 2px solid skyblue;
            background-image: url(../jQuery/1.jpg);
            background-size: cover;
            background-repeat: no-repeat;
        }

在这里插入图片描述
图片小于容器：等比例放大，填满整个背景区域，图片可能造成某个方向上的内容溢出

 div {
            width: 500px;
            height: 340px;
            border: 2px solid skyblue;
            background-image: url(yinyue.jpg);
            background-size: cover;
            background-repeat: no-repeat;
        }

在这里插入图片描述
5.background-position 背景图片定位
百分比/偏移值（例如：left 、 top）/center left right
应用1：之前淘宝网首页上的广告：
图片实际大小绿色区域，但需要实现图片始终居中且两侧不留白，那么就可以用background-size:cover 和background-position:center 来实现

在这里插入图片描述

 * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 100%;
            height: 60px;
            background-image: url(ad.png);
            background-size: cover;
            background-position: center;
        }

应用2：雪碧图（CSS精灵）一种CSS图像合成技术
好处：
1.将多张图片合并到一张图片中，可以减小图片的总大小。
2.将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。

蓝框所在区域的图标通过调整背景图片的位置，实现对应的图片
在这里插入图片描述

下图是淘宝网的雪碧图：

具体的实现还请读者自己通过控制台一点点的调节偏移值，我放置我一点点调出来的数值没有任何意义且我调的值可能会与淘宝网上的有几px的偏差，最准确的值参考淘宝网。
6.background-origin：规定 background-position 属性相对于什么位置来定位 CSS3新增
从border的位置开始填充背景：border-box
在这里插入图片描述
从padding的位置开始填充背景：padding-box

从content的位置开始填充背景：content-box

7.background-clip ：设置内容的裁切，控制的是显示。 CSS3新增
显示border及以内的内容：border-box
显示padding及以内的内容：padding-box
显示content及以内的内容：content-box
在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo1 {
            width: 450px;
            height: 250px;
            background-color: blue;
            padding: 50px;
            margin: 10px;
            border: 20px solid white;
            background-image: url(jQuery/1.jpg);
            background-position: -50px 0px;
            background-origin: padding-box;
            background-size: contain;
            background-repeat: no-repeat;
            background-clip: padding-box;
        }
        
        .demo2 {
            width: 450px;
            height: 250px;
            background-color: blue;
            padding: 50px;
            margin: 10px;
            border: 20px solid rgb(211, 98, 98);
            background-image: url(jQuery/1.jpg);
            background-position: -50px 0px;
            background-origin: border-box;
            background-size: contain;
            background-repeat: no-repeat;
            background-clip: border-box;
        }
        
        .demo3 {
            width: 450px;
            height: 250px;
            background-color: blue;
            padding: 50px;
            margin: 10px;
            border: 20px solid white;
            background-image: url(jQuery/1.jpg);
            background-position: -50px 0px;
            background-origin: content-box;
            background-size: contain;
            background-repeat: no-repeat;
            background-clip: content-box;
        }
    </style>
</head>

<body>
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
</body>