CSS 可以添加背景颜色和背景图片,以及来进行图片设置。

说明:

一、background-color 背景颜色

可以使用该属性给一个元素定义背景颜色。

语法:

background-colorcolor 值;

color 值可以是颜色单词,十六进制等 W3C 允许的颜色值。

背景透明(CSS3):

语法:

backgroundrgba(0,0,0,0.3);

最后一个参数是 alpha 透明度 取值范围 0~1 之间。

Tips: 背景半透明是指盒子背景半透明, 盒子里面的内容不受影响。

二、background-image 背景图像

该样式属性用于设置背景图片。

语法:

background-image : none | url (url)
  • none:表示默认值,没有背景图;
  • url :  使用绝对或相对地址指定背景图像;

Tips:background-image 属性允许指定一个图片展示在背景中(只有 CSS3 才可以多背景)可以和 background-color 连用。

如果图片不重复的话,图片覆盖不到的地方都会被背景色填充。 如果有背景图片平铺,则会覆盖背景颜色。

扩展:

  • GIF 格式图像可以设计动画、透明背景,图像小巧等优点;
  • JPG 格式图像具有更丰富的颜色数,图像品质相对要好;
  • PNG 类型综合了 GIF 和 JPG 两种图像的优点,不足就是占用空间相对要大;

三、background-repeat 背景平铺

该样式属性用于设置背景图片的平铺方式。

语法:

background-repeat : repeat | no-repeat | repeat-x | repeat-y | round | space
  • repeat:  背景图像在纵向和横向上平铺(默认的)
  • no-repeat:  背景图像不平铺
  • repeat-x:  背景图像在横向上平铺
  • repeat-y:  背景图像在纵向平铺
  • round:背景图像自动缩放直到适应且充满整个容器。(仅 CSS3 支持)
  • space:背景图像以相同的间距平铺且填充满整个容器或某个方向。(仅 CSS3 支持)
  • 设置背景图片时,默认把图片在水平和垂直方向平铺以铺满整个元素。

四、background-position 背景位置

该属性用于设置背景图片的位置。

语法:

background-position : length || length

background-position : position || position
  • length :  百分数 | 由浮点数字和单位标识符组成的长度值。
  • position :   top | center | bottom | left | center | right (方位名词)

说明

设置或检索对象的背景图像位置时,必须先指定 background-image 属性。默认值为:(0% 0%)。

如果只指定了一个值,该值将用于横坐标。纵坐标将默认为 50%。第二个值将用于纵坐标。

注意

  1. position 后面是 x 坐标和 y 坐标。 可以使用方位名词或者 精确单位。

  2. 如果和精确单位和方位名字混合使用,则必须是 x 坐标在前,y 坐标后面。比如 background-position: 15px top; 则 15px 一定是 x 坐标 top 是 y 坐标。

  3. 方位名字可以没有顺序,但是精切单位第一个为 x 坐标,第二个 为 y 坐标。

扩展:在网页中的坐标轴和现实生活中的坐标轴不同。在网页中左上角为原点,X 轴的正方向指向右方,Y 轴的正方向指向下方,Z 轴的正方向是从屏幕向外的。

在给背景图指定位置时,一定到注意到方向和正负值。

五、background-attachment 背景附着

如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。

通过 该属性可以 防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响。

语法:

background-attachment : scroll | fixed | local
  • scroll:  背景图像是随对象内容滚动,默认值
  • fixed:  背景图像固定
  • local: 背景图图像相对于元素内容固定,就是当元素内容滚动时背景图像也会跟着滚动,此时不管元素本身是否滚动,当元素显示滚动条时才会看到效果。(仅 CSS3 支持)
  • 设置或检索背景图像是随对象内容滚动还是固定的。

六、background 背景简写

background 属性的值的书写顺序官方并没有强制标准的。为了可读性,建议大家如下写:

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

backgroundcolor url(image.jpgrepeat-y scroll 50% 0 ;

七、background-size 背景缩放(CSS3)

通过该属性设置背景图片的尺寸,就像设置 img 的尺寸一样,在移动 Web 开发中做屏幕适配应用非常广泛。

语法:

background-imageurl('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */
  • 可以设置长度单位(px)或百分比(设置百分比时,参照盒子的宽高)
  • 设置为 cover 时,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。平时用的 cover 最多。
  • 设置为 contain 会自动调整缩放比例,保证图片始终完整显示在背景区域

八、多背景(CSS3)

CSS3 支持多背景图的。以逗号分隔可以设置多背景,可用于自适应布局,每个 url 用逗号隔开就好了。

语法:

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px ,
url(test1.jpgno-repeat scroll 10px 20px/70px 90px ,
url(test1.jpgno-repeat scroll 10px 20px/110px 130px #aaa;
  • 一个元素可以设置多重背景图像。
  • 每组属性间使用逗号分隔。
  • 如果设置的多重背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上。
  • 为了避免背景色将图像盖住,背景色通常都定义在最后一组上。

九、background-clip 背景裁剪(CSS3)

该属性定义背景图像的裁剪区域。

语法:

background-clipborder-box | padding-box | content-box | text;
  • border-box:从边框区域向外裁剪背景;(默认值)
  • padding-box:从补白区域向外裁剪背景;
  • content-box:从内容区域向外裁剪背景;
  • text:从前景内容区域向外裁剪背景;

十、background-origin 背景坐标(CSS3)

background-position 这个属性总是根据元素左上角为坐标原点进行定位背景图像。使用 background-origin 属性可以改变这种定位方式。

语法:

background-originborder-box | padding-box | content-box;
  • border-box:从边框区域开始显示背景;
  • padding-box:从补白区域开始显示背景;(默认值)
  • content-box:仅在内容区域显示背景;
posted on 2019-07-01 11:19  格物致知_Tony  阅读(263)  评论(0编辑  收藏  举报

目录导航