CSS笔记（五）盒子模型

2024-07-11 14:10| 来源: 网络整理| 查看: 265

一、背景 1.背景颜色 background-color： ;

关于背景颜色有一个值为 opacity

opacity属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明：

例1：

div { background-color: green; opacity: 0.3; }

例2：

div { background: rgba(0, 128, 0, 0.3) / }

2.背景图片 background-image: ;

如果设置背景图片比盒子设置的宽度和高度小，那么背景图片就会在水平和垂直方向都重复平铺在盒子里

加多重背景兼容性不太好

（记得使用图片时，使用不会干扰文本的图像哦！）

p { background-image: url("01.gif"); } 3. 背景重复 background-repeat

默认是背景图片重复平铺在盒子里

repeat-x水平方向重复repeat-y垂直方向重复no-repeat 不重复，只显示一次

4.背景图片位置 background-position

background-position ：值1 值2；

值1是x轴坐标值2是y轴坐标

单位：

background-position ：right top；（默认）右上角方位等价于background-position ： 0 0； background-position ：值1 值2；像素距离左侧，上侧多少像素background-position ：50% 50%；百分比=background-position ：center center；如果只写了一个值，第二个值默认值center或者是50%

5.背景图片大小 background-size

css3新增元素，如果不兼容的话要加前缀

background-size：值1 值2；

值1代表背景图片的宽度，值2代表背景图片的高度

单位：

background-size：50% 100%百分比background-size：400px 500px数值（px）.background-size：cover 把背景图等比例像扩展至最大尺寸，以使背景图像完全覆盖背景区域（可能会裁剪图片）background-size：contain

把背景图等比例像扩展至最大尺寸，以使背景图片高度和宽度完全适应内容区域（可能会出现背景区域留白）

等价于background-size：100%

如果只设置了一个值，是宽度，那么高度会随着宽度的变化而变化

6.background-origin 定义背景图片的渲染位置

border-box 边框盒子背景图片从边框开始控制渲染

padding-box 背景图片从内边距开始控制渲染

content-box 背景图片从内容开始控制渲染

7.background-attachment 定义背景图片是否固定或者随着页面的其余部分滚动

background-attachment ：fixed 固定图片固定在页面上，不随着内容的滚动而滚动

background-attachment ：scroll 默认背景图像随页面的其余部分一起滚动

7. 背景简写

提问！都有哪些属性值可以简写

在前面的博客里提到了font值，padding值，margin值都可以简写，当然背景也可以啦

之前：

body { background-color: #ffffff; background-image: url("tree.png"); background-repeat: no-repeat; background-position: right top; }

简写之后：

background : #ffffff url("tree.png") no-repeat right top / 500px fixed ;

如此一来是不是让代码看起来不那么冗长，简单明了

没有先后顺序，空格隔开位置在前，大小在后，位置和大小之间用 / 隔开

background-color 背景颜色background-image 背景图片background-repeat 背景图片是否重复background-position 背景定位background-size 背景大小background-attachment 背景图片是否滚动

【本文地址】

公司简介

联系我们

CSS笔记（五） 盒子模型

CSS笔记（五）盒子模型