CSS盒子模型-背景属性

2021-12-10 22:33:38 阅读：393 来源： 互联网

1.设置背景颜色

在CSS中，使用 background- color属性来设置网页元素的背景颤色，其属性值与文本颜色的取值一样，可使用预定义的颜色值、十六进制# RRGGBB或RGB代码rgb(r.g.b),background- color的默认值为 transparent,即背景透明，此时子元素会显示其父元素的背景。
下面通过一个案例来演示 background- color属性的用法。新建HTML页面，在页面中添加标题和段落文本，然后通过 background- color属性控制标题标记<h2>和主体标记<body>的背景颜色。

在上例中，通过 background- color属性分别控制标题和网页主体的背景颜色。
在图中，标题文本的背景颜色为黄色，段落文本显示父元素body的背景颜色。这是由于未对段落标记<p>设置背景颜色时，会默认为透明背景( transparent),所以段落将显示其父元素的背景颜色。

2.设置背景图片

背景不仅可以设置为某种颜色，还可以将图像作为元素的背景。在CSS中通过background-image属性设置背景图像，

示例代码：

效果：

如果图片是小尺寸的话，背景图像会自动沿着水平和竖直两个方向平铺，充满整个页面，并覆盖boby的背景颜色值。

3.背景与图片不透明度设置

3.1 RGBA模式

RGBA是CS3新增的颜色模式，它是RGB颜色模式的延伸，该模式是在红、绿、蓝三原色的基础上添加了不透明度参数。其语法格式为：

raba(r,g,b,alpha);

在上面的语法格式中，前三个参数与RGB中的参数含义相同， alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的数字。

例如，使用RGBA模式为p元素指定透明度为0.5,颜色为红色的背景，代码如下。

p{background-color:rgba(255,0,0,0.5);}

3.2 opacity属性

在CSS3中，使用 opacity属性能够使任何元素呈现出透明效果。其语法格式为

opacity:opacityValue;

在上述语法中， opacity属性用于定义元素的不透明度，参数 opacityValue表示不透明度的值，它是一个介于0~1的浮点数值。其中，0表示完全透明，1表示完全不透明，而0.5则表示半透明。

示例：

4.设置背景平铺

默认情况下，背景图像会自动沿着水平和竖直两个方向平铺，如果不希望图像平铺，或者只沿着一个方向平铺，可以通过 background- repeat属性来控制，该属性的取值如下。

repeat:沿水平和竖直两个方向平铺（默认值）
no- repeat:不平铺(图像位于元素的左上角，只显示一个)。
repeat-x:只沿水平方向平铺。
repeat-y:只沿竖直方向平铺

5.设置背景图像位置

如果将背景图片的平铺属性background-repeat定义为no-repeat，图像将默认以元素的左上角为基准点显示。

示例：

效果：

在示例中，将body的背景图设置为不平铺，在浏览器中运行，背景图位于HTML页面的左上角，即body元素的左上角。

若是希望背景图片出现在其它位置，就需要另一个CSS属性background-position，设置背景图像的位置。

示例：

如图中代码和效果所示，背景图像出现在了右上角。

在CSS中，background-position属性的值通常设置为两个，中间用空格隔开，用于定义背景图像在元素的水平和垂直方向的坐标，如上面的" right top"。 background- position属性的
数认值为“0 0” 或" lefttop”，即背景图像位于元素的左上角。
background-position属性的取值有多种，具体如下。
(1)使用不同单位(最常用的是像素px)的数值：直接设置图像左上角在元素中的坐标，如" background- position:20px 20px;”。
(2)使用预定义的关键字：指定背景图像在元素中的对齐方式

水平方向值：left、 center、 right。
垂直方向值：top、center、bottom。

两个关键字的顺序任意，若只有一个值则另一个默认为 center。例如：

center　　　相当于 center center（居中显示）
top　　　相当于 center top(水平居中、上对齐)。
(3)使用百分比：按背景图像和元素的指定点对齐。

0%0%　　表示图像左上角与元素的左上角对齐。
50%50%　　表示图像50%50%中心点与元素50%50%的中心点对齐。
20%30%　　表示图像20%30%的点与元素20%30%的点对齐。
100%100%　　表示图像右下角与元素的右下角对齐，而不是图像充满元素。

如果只有一个百分数，将作为水平值，垂直值则默认为50%。
接下来将 background- position的值定义为像素值来控制下面例子中背景图像的位置，body的CSS样式代码如下。

标签：平铺,盒子,背景,元素,background,图像,CSS,属性
来源： https://www.cnblogs.com/wenwenfff/p/15664853.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9