【CSS】CSS(灵境—大圆满)——CSS背景图像

CSS背景图像

CSS的背景可以利用页面元素添加背景样式

背景样式可以设置背景颜色,背景图片,背景是否平铺,背景图片的位置,背景图片的固定等等

一,背景颜色

background-color: 颜色值;(透明的transparent)

二,背景图片

background-image: none/url(地址);(none表示没有背景图片  url使用绝对或者相对地址)

三,背景的平铺

• HTML中页面对背景图片进行平铺background-repeat属性
• 参数值:repeat(背景图像默认在纵向和横向上平铺)

实例:

background-repeat: repeat;
/* 背景完全平铺 */
background-repeat: no-repeat;
/* 背景不平铺 */
background-repeat: repeat-x;
/* 背景横向平铺 */
background-repeat: repeat-y;
/* 背景纵向平铺 */

四,背景图片的位置

• background-position属性改变图片在背景中的位置
• 后面的值可以设置x,y坐标还可以设置方位名词

实例:

background-position: 20px 50px;
background-position: top left;

背景图片的位置值可能出现的情况

1.参数是方位名词

• 如果指定的两个值都是方位名词,则两个值前后顺序无关 left top和 top left等价
• 如果只指定了一个方位名词，另一个省略了。 则第二个默认居中对齐

2.参数是精确的单位

• 如果说参数是精确的坐标，那么第一个x坐标 第二个y坐标
• 如果只指定了一个数值，那么数值一定是x坐标，另一个垂直居中

3.参数是混合单位

• 如果指定的两个值是精确单位和方位名词混合使用，第一个值是x坐标，第二个值是y的坐标

五,CSS背景图片固定

• background-attachment:属性;这是背景图像是否固定或者随着页面的其余部分滚动。

background-attachment后期制作视觉滚动效果

background-attachment: fixed;
/* 背景图像固定 */
background-attachment: scroll;
/* 背景图片随着对象内容滚动 */

为了代码的简化,这些属性都可以写在同一个里面background.

• background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;(实际开发中 提倡这样的写法)

六,CSS中提供了背景颜色半透明的效果

background:rgba(0,0,0,0.3);

• alpha透明度，取值0-1之间
• 习惯把0.3的0省略掉。background(0,0,0,.3);
• 注意：背景半透明指盒子背景的半透明，盒子中的内容不受影响

本文地址：https://blog.csdn.net/XVJINHUA954/article/details/109629750