CSS background系列属性

mrcode 发布于2019-08-29 17:30 / 2019人阅读

摘要：通过该属性可以控制绘制的区域。背景图片相关的属性背景图片本身是有自身尺寸的，被应用元素也有自己的尺寸。通过属性可以修改原点位置。坐标系的反方向都是重复方式绘制。该位置是相对于原点构建的坐标系，默认情况下该位置就是在原点。

一、元素背景是指哪些区域

默认情况下元素的背景是指元素border（包含border）以内的区域。

在CSS3中可用使用background-clip改变元素背景区域。

1.1 background-clip

指定背景在被应用元素上的绘制区域。元素盒模型包含content, padding, border, margin。默认背景绘制的区域包含：content+padding+border，不包含margin区域。通过该属性可以控制绘制的区域。

background-clip: border-box|padding-box|content-box|initial|inherit|text;

其中取值text比较吊炸天，即背景只显示在文本区域，可以实现美轮美奂的文字啦。

该属性颜可以影响颜色类型和图片类型的背景；

背景只能在可绘制区域里绘制，其他区域如margin区域是不会绘制的。

二、背景颜色 2.1 background-color

指定背景的颜色

只能设置一个颜色值，特殊的颜色值：transparent，也是默认值；

通过background-clip属性可以控制background-color的应用范围；

background-clip属性要先背景颜色属性时，否则该background-clip属性无效（背景图片就没有这个问题）。

三、背景图片 3.1 指定背景图片 1）background-image

给元素指定一个或多个图片类型的背景（而只能指定一种背景颜色）。CSS3可以指定多个背景图片了。多个图片之间用逗号隔开，其他相关的属性可以做作用于多个背景图片上，也是用逗号隔开。

多个背景图片之间的显示互相独立，各不影响；

可以同时指定背景图片和背景颜色；

背景图片本身是有自身尺寸的(background-size)，被应用元素也有自己的尺寸。被应用元素没有被背景图片覆盖的区域则会通过重复绘制背景图片（当然了可以通过CSS属性修改默认的方式）的方式进行覆盖整个绘制区域。

3.2 背景图片相关的属性

背景图片本身是有自身尺寸的(background-size)，被应用元素也有自己的尺寸。可以对背景图片进行更复杂的操作。

1）background-origin

原点（origin）是指背景图片开始绘制起始点，默认情况下原点在被应用元素的padding区域的左上角位置。通过background-origin属性可以修改原点位置。以原点向右有X坐标轴正方向，向下为Y坐标轴正方向，背景图片就按照这个坐标系统开始重复绘制背景图片。坐标系的反方向都是重复方式绘制。

background-origin: padding-box|border-box|content-box|initial|inherit;

原点的坐标系是个矩形区域；

可能我们会想当然的认为背景的绘制区域（backgroud-clip）的左上角就是背景图片绘制的原点，但实际却不是这样的,他们俩没有必然的关系：

首先原点和绘制区域的默认值是不一样的

甚至原点可能在绘制区域的外面

2） background-position

背景图片的左上角称为背景图片的位置。该位置是相对于原点构建的坐标系，默认情况下该位置就是在原点。通过background-position可以指定图片相对于原点移动的位置（也可以认为移动背景图片到指定的位置）。

background-position-x: xpos | inherit | initail;
background-position-y: ypos | inherit | initail;
// 简写形式
background-position: xpos [ypos] | inherit | initail;

xpos取值：

绝对值：图片左上角相对于原点X轴方向移动距离;

百分比：计算方式比较奇葩。
如background-position-x: 10%并不是表示图片左上角相对于原点X轴方向移动10%，而是表示背景图片X轴方向10%的位置（基于图片Size计算）和原点坐标X轴方向10%的位置（基于原点矩形宽度计算）对齐。计算方式有点绕，主要目的是通过这种计算方式可以很容易实现背景图片的对齐：如0%即表示左对齐，50%表示居中，100%表示右对齐。

关键词left: 表示图片的左侧跟原点矩形左边对齐，相当于0%，0

关键词center：表示背景图片在原点矩形中左右居中，相当于50%

关键词right：表示图片的右侧和原点矩形的右侧对齐，相当于100%

ypos取值：

绝对值：相对于原点Y轴方向距离

百分比：类似xpos取值百分比

关键词top：表示图片的上边和原点矩形上边对齐，相当于0%, 0

关键词center：表示背景图片在原点矩形上下居中，相当于50%

关键词bottom：表示背景图片的底部和原点矩形的底边对齐，相当于100%

总结一下就是：绝对值用来控制图片移动距离，百分比值控制图片对齐方式，关键词值是对齐方式的简写形式。

3）background-repeat

一方面背景图片可能比背景区域小，另一方面背景图是从origin位置开始绘制的，部分背景区域可能在原点坐标系的负方向。对那些没有被背景图片覆盖的区域，浏览器默认会通过从左到右，从上到下的方向进行重复绘制背景图片，原点的负方向也是按照这个方式重叠绘制。通过background-repeat属性可以控制是否重复以及怎么执行重复绘制背景图片。

background-repeat: repeat | repeat-x | repeat-y | space | round | initital | inherit

repeat-x, repeat-y, repeat
是浏览器默认的行为：从上到下，从左到右，背景图片可能会发生剪切

space
space让背景图片在不发生剪切的情况下尽可能多的重复，如果有多余的空隙，则均分在各个背景图片之间。
注意space只是保证原点矩形内背景图片不发生剪切，对于那些不在原点矩形外的背景区域还是通过剪切的方式进行重复

round
round跟space类似，但是如果有多余的空隙则背景图片通过缩放的方式侵占空隙。
拉伸：多余的空间小于背景图片一半
压缩：多余的空间大于背景图片的一半
注意round跟space类似，round也只是保证原点矩形内背景图片不发生剪切，对于那些不在原点矩形外的背景区域还是通过剪切的方式进行重复。

4）background-size

背景图片可能具有原始的尺寸，可以通过background-size指定背景图片的大小，进而可以对背景图片进行缩放操作。

background-size: auto | width [height] | cover | contain | initail | inherit

auto表示使用图片的本身的尺寸；

width [height] 指定具体的长度，

绝对值
指定具体的值

百分比
相对于原点矩形的尺寸计算

cover
首先保证背景图片平铺整个绘制区域，如果背景图片小，则通过等比例方式拉伸

contain
首先保证背景图片完整显示背景图片，如果背景图片大，则通过等比例方式缩小

5) background-blend-mode

指定多个背景图片混合模式

6) background-attachment

指定背景图片的固定方式。

background-attachment: scroll|fixed|local|initial|inherit;

scroll: 表示背景图片相对于元素本身固定，即它会随着被应用元素的滚动而滚动；

fixed: 表示背景图片相对于元素的视口固定，即它不会随着被应用元素的滚动而滚动；

local: 表示背景图相对于应用元素的内容而固定，即如果被应用元素的内容有滚动，则其会随着被应用元素的内容滚动而滚动（注意和fixed区别）。

7) background

简写格式

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

额，好长，记不清的话还不如使用具体的backgroud属性。方便的记忆法：

先确定背景类型

如果是图片，则确定图片的属性（位置，大小，重复方式，绘制起始点）

确定绘制区域

背景图片固定方式

四、总结

绘制元素背景的条件：

首先要确定背景区域；

确定背景类型：颜色、图片；

如果是图片还可以更细致的控制。

除了background-clip可以应用于background-color其他属性都是用于background-image的；

如果background-clip取值为border-box，则border会覆盖在background上面，即border的颜色或者图片会覆盖背景颜色或者图片。

私有云混合云 css属性访问CSS属性 position属性，css 获取CSS属性值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114367.html

css基础系列

摘要：盒子模型边框，外边距，内部距，内容，宽度。盒子模型和标准盒子模型行内块元素，元素呈现为具有相依特性元素不会被显示。文字基线属性设置元素中文本行高语法长度值百分比浏览器有默认的行高，不同浏览器默认行高不一样。盒子模型： border边框，margin外边距，padding内部距，content内容，width宽度。高度： height: 长度值|百分比|auto 最大高度: m...

SexySix 2019-04-22 16:12 评论0 收藏0
css基础系列

摘要：盒子模型和标准盒子模型行内块元素，元素呈现为具有相依特性元素不会被显示。文字基线属性设置元素中文本行高语法长度值百分比浏览器有默认的行高，不同浏览器默认行高不一样。盒子模型盒子模型的概念高和宽的设置边框的设置内边距的设置外边距的设置盒子的计算元素显示的方式盒子模型： border边框，margin外边距，padding内部距，content内容，width宽度。 ...

shiina 2019-04-23 11:40 评论0 收藏0
css基础系列

摘要：盒子模型和标准盒子模型行内块元素，元素呈现为具有相依特性元素不会被显示。文字基线属性设置元素中文本行高语法长度值百分比浏览器有默认的行高，不同浏览器默认行高不一样。盒子模型盒子模型的概念高和宽的设置边框的设置内边距的设置外边距的设置盒子的计算元素显示的方式盒子模型： border边框，margin外边距，padding内部距，content内容，width宽度。 ...

asce1885 2019-04-23 15:06 评论0 收藏0
前端学习之路之CSS （三）

摘要：创建有三种方法外部样式表内部样式表内联样式。当设置为，每一行被展开为宽度相等，左，右外边距是对齐。用于把所有用于列表的属性设置于一个声明中将图象设置为列表项标志。表格表格边框指定表格边框，使用属性。Infi-chu: http://www.cnblogs.com/Infi-chu/ 创建CSS有三种方法：外部样式表、内部样式表、内联样式。优先级：内联样式>内部样式>外部样式表>浏览器默认样...

番茄西红柿 2019-04-23 13:21 评论0 收藏0
【前端Talkking】CSS系列-一步一步带你认识animation动画效果

摘要：是一个复合属性有以下属性可以单独写每一个属性，也可以直接使用复合属性。用法指定动画播放方式，默认值为，支持。看例子好理解在浏览器中的运行效果如下这个例子就不详细解释了，很简单。 0、写在前面在CSS系列——一步一步带你认识transition过渡效果这篇文章中，我给大家详细讲解了transition过渡的用法，能够实现比较友好的过渡效果，但是功能比较有限，如果要想实现比较漂亮的动画效...

yexiaobai 2019-08-29 14:10 评论0 收藏0