盒子模型的背景

您所在的位置：网站首页 › dw怎么放背景图 › 盒子模型的背景

盒子模型的背景

2023-12-17 21:44| 来源: 网络整理| 查看: 265

文章目录前言一、盒子的背景颜色二、盒子的背景图片 1.注意细节 2.当图片比较小时，控制是否平铺 3.设置背景图片在盒子上的位置三、精灵图（雪碧图）四、设置背景图的大小五、复合属性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

【本文地址】

盒子模型的背景

盒子模型的背景

今日新闻

推荐新闻