君语贤
时光静好,与君语;细水流年,与君同;繁华落尽,与君老...

前端设计>知识整理>正文

网页背景属性

2019-01-24 12:03 君语贤属性网页背景

网页背景属性

背景:可以是单一颜色或图片填充元素

1.背景色

属性:background-color

取值:合法的颜色值

注意:背景颜色默认是从边框的位置处开始填充的

2.背景图片

属性:background-image

取值:url(图片的路径);

ex:background-image:url(a.jpg);

3.背景图片平铺

属性:background-repeat

取值:

repeat 默认值,横向纵向都平铺

no-repeat 不平铺(图片只显示一次)

repeat-x 只在水平方向平铺

repeat-y 只在垂直方向平铺

4.背景图片尺寸

属性:background-size

取值:

1.width/height  (ex:200px 300px)

2.width%/height%  (ex:50% 50% 是元素自己的高宽占比)

3.cover

将背景图等比放大,直到背景图完全覆盖到元素的所有区域为止。

4.contain

将背景图等比放大,直到背景图碰到元素的某一个边缘为止

5.背景图片固定

作用:将背景图固定在网页的某个位置处,一直在可视区域中,不会随着滚动条而发生位置的变化。

属性:background-attachment

取值:

1.scroll 默认值,滚动

2.fixed 固定

6.背景图片定位

作用:改变背景图在元素中的位置

属性:background-position

取值:

1.x y  具体的数值(px)

x:

背景图水平偏移距离

取值为正,向右移动

取值为负,向左移动

y:

背景图垂直偏移距离

取值为正,向下移动

取值为负,向上移动

2.x% y%

0% 0% 背景图在左上角

100% 100% 背景图在右下角

50% 50% 背景图在中间位置

3.关键字

x:left/center/right
y:top/center/bottom
ex:background-position:right top;

7.背景简写属性

在一个属性中指定背景的多个属性值

属性:background

取值:color url() repeat attachment position

ex:

background:gray url(a.jpg);

注意:

如果不设置其中某个属性值的话,该位置采用默认值。

本文链接:https://www.weguiding.com/zhishi/199.html