盒子模型的背景

最新推荐文章于 2024-08-03 09:43:52 发布

小召小召

最新推荐文章于 2024-08-03 09:43:52 发布

阅读量3.2k

点赞数 1

文章标签： css html html5

本文链接：https://blog.csdn.net/originalApril/article/details/114894641

版权

文章目录

前言
一、盒子的背景颜色
二、盒子的背景图片
三、精灵图（雪碧图）
四、设置背景图的大小
五、复合属性background

前言

盒子的背景：背景颜色，背景图片。只要是一个盒子，就可以设置它的背景。

提示：以下是本篇文章正文内容，下面案例可供参考

一、盒子的背景颜色

背景颜色，默认会填充盒子的内容区域，padding区域，边框区域。并不会填充margin区域。
background-color: 单词/16进制/rgb函数/rgba函数/transparent

二、盒子的背景图片

background-image: url函数 url函数中图上的路径可以加"" 也可以不加。

1.注意细节

背景图片，填充了内容区域，padding区域，边框区域。
默认情况下，图片的左上角和盒子的padding的左上角是对齐的。
默认情况下，一张图片，作为盒子的背景图片，是不压缩，不变形，图片本身多大，放在盒子中还是多大。
如果盒子小，图片大，盒子中只能显示图片的一部分。如果盒子大，图片小，一张图片，肯定会完整显示，并且会平铺。
如果图片比较小，它会沿着x轴和y轴都进行平铺。

2.当图片比较小时，控制是否平铺

background-repeat:
repeat 平铺默认就是平铺
no-repeat 不平铺如果不平铺的话，边框上也没有背景图片
repeat-x x轴平铺
repeat-y y轴平铺
如果不平铺，图片的左上角和盒子的padding的左上角是对齐的。

3.设置背景图片在盒子上的位置

默认位置： 图片的左上角和盒子的padding的左上角是对齐的。
设置： background-position：0 0 第1个0表示x轴坐标第2个0表示y轴坐标 00表示原点
x值和y值可以写一个像素值，如：
background-position: 93px 68px;

除了写像素值之外，也可以写单词：
x：left center right，y: top center bottom。
还可以写百分比：

x:0% 50% 100%，y:0% 50% 100%

三、精灵图（雪碧图）

问：请求是越多越好吗？
答：不是的请求越少越好

如果说一个网站上有很多的小图片，1000张，就意味着要发送1000个请求，服务器要给你1000个响应。

解决：如果说把小图片，放到一张大图片上，如1000个小图，合成一个大图，就意味着，只需要请求一个大图就OK了，这样就减少了请求数。把N个小图合在一个大图，这个大图，叫精灵图，也叫雪碧图。

问：盒子是小盒子，里面需要放一个小图，但是我们得到的是一个精灵图，如何放？
答： backgroud-postion

代码如下（示例）：

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style>
         *{ margin: 0; padding: 0; }
         .box1{
             width: 123px;
             height: 33px;
             border: 1px solid red;

             background-image: url(./images/index_sp.png);
             background-position: 0 -120px;
         }
         .box2{
             width: 40px;
             height: 40px;
             background-image: url(./images/index_sp.png);
             background-position: -288px -7px;
         }
     </style>
 </head>
 <body>
     <div class="box1"></div>
     <br>
     <br>
     <br>
     <div class="box2"></div>
 </body>
 </html>

精灵图（雪碧图）示例：
雪碧图示例
结果：
在这里插入图片描述

四、设置背景图的大小

默认情况下，图片作为盒子的背景图，是不放大，也不缩小，原本是多大，还是多大。可以通过background-size来设置背景图的大小。

格式：background-size:100px 100px; 第1个值代表宽度，第2个值代表高度。
单位也可以是百分比，background-size:50% 50%；这里的50%是width和padding之和的50%。

后面还有特殊值：
原图效果：
在这里插入图片描述

（1）cover 把背景图扩展足够大，完全覆盖整个盒子，等比放大，背景图片中的某些区域不能显示在盒子中。
cover效果：
在这里插入图片描述

（2）contain 把背景图扩展足够大,直到高度或宽度撑满整个盒子，图上是完整显示的，盒子中的某些区域可能没有被覆盖掉。
contain效果：
在这里插入图片描述

五、复合属性background

查询权威一点的资源：
（1）MDN 地址：https://developer.mozilla.org/zh-CN/
（2）W3CShool 地址：https://www.w3school.com.cn/
使用background属性，顺序如下：
background-color
background-image
background-repeat
background-attachment
background-position