07.背景样式

1.什么是背景样式

背景样式：是W3C规定一个浏览器如何渲染元素的背景层，用户可以在背景层上增加颜色，图片等效果

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1YX2D1wD-1581674132765)(C:\Users\dell\Desktop\我的博客\QQ截图20200213171523.png)]$

2.背景单例样式

**背景颜色（background-color）**默认颜色为transparent，可以近似理解为透明）

3种写法：

rgb: 字符含义 r→red（红） g→green（绿） b: blue（蓝）
取值范围:rgb(0,0,0)→rgb(255,255,255)
rgba：rgba较之rgb多了一个alpha通道用来设置背景透明度，a的取值范围为0~1，（opacity设置整个元素的透明度，背景色rgba设置背景层的透明度）
十六进制： #000000~#ffffff(大小写都可,但是要统一)，#aabbcc简写: #abc

另外，背景颜色是可以延伸到border边框下的。

背景图片（background-imag）

background-image：url(“图片地址”);

常用背景图片格式：
.jpg 不支持动画，不支持透明，渐进显示，颜色丰富，有损
.png 不支持动画，支持透明度，颜色更丰富，无损
.gif 支持动画，256种颜色，2种透明度，渐进显示
.webp 支持动画，高压缩率，高加载速率

背景平铺（background-repeat）

写法：background-repeat: repeat-x;
background-repeat: repeat-y

如果不需要背景图片重复显示：
样式值可设置为no-repeat;

备注：如果采取默认的背景图片平铺，则背景图片则会延伸到边框之下，如果不重复，则图片不会延伸至边框之下

背景大小（background-size）

背景图片缩放：background-size: width height；

数字类样式值：
百分比：百分比的计算基数为元素的width和height;
像素：直接数值;
(数值可以写一个或两个,如果只有一个第二个就是默认auto)

关键字类样式值：
cover：图片等比缩放直到刚好覆盖背景区域
contain：图片等比缩放,直到有一条边触碰到边框就停止。

背景图片缩放: background-size:400px auto;
background-size:100% auto;
auto的意思为:按照此时的图片宽度，等比例拉大图片的高度

背景图片显示基点（background-origin）

背景图片显示基点样式background-origin：规定了在图片不平铺的情况下，背景图片的左上角顶点的初始位置
content-box: 背景图片内容区左上角开始
padding-box: 背景图片从内边距左上角开始
border-box: 背景图片相当于边框左上角开始

背景图片裁剪区域（background-clip）

背景图片从开始裁切: background-clip
content-box: 只显示内容区部分的背景图片
padding-box:显示内容区和内边距部分的背景图片
border-box: 显示内容区、内边距和边框部分的图片

当背景图片的源文件大小远大于元素时，那么即便不设置背景图片大小和背景平铺的时候也能够占满元素的所有区域，并且此时还会有部分图片内容超出元素的边缘

背景图片裁剪区域（background-clip）样式的作用就是，在背景图原始尺寸大于元素的时候讲图片进行裁剪，保证背景图片在哪个区域可见

背景图片关联依附（ background-attachment ）

fixed：
此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

local：
此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

scroll：
此关键字表示背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。

overflow样式

overflow样式的作用就是，一个元素的内容太大而超出元素边缘时，浏览器对超出部分的内容如何处理

overflow：visible;（默认）
超出内容正常显示

overflow：hidden;
超出内容隐藏

overflow：scroll;
如果内容比较多，则用滚动条的形式展示多余内容

overflow：auto;
内容未超出，正常显示
内容超出，显示滚动条

复合写法

background: no-repeat url(https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1208538952,1443328523&fm=26&gp=0.jpg) scroll 20px 20px/50px 50px, url(https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg) no-repeat scroll 100px 100px/50px 50px, red;
注意颜色在最后面	}

--------------------------------- | ---- |
| 注意颜色在最后面 | } |

来源：CSDN

作者：拾玥花开

链接：https://blog.csdn.net/weixin_44691513/article/details/104316415

标签

background

background-size