图解 CSS (4): background - 背景

background
background-color
background-attachment
background-image
background-position
background-position-x
background-position-y
background-repeat

设置背景色(譬如红色): background-color: red; 或者 background: red;

o_0912918.png

背景图片: background-image: url(路径); 或者 background: url(路径);
其中的路径可以是相对或绝对路径, 可以带双引号或单引号.

o_0912919.png

background-repeat(背景图片反复方式): repeat(默认)、no-repeat、repeat-x、repeat-y.

o_0912920.png
o_0912921.png
o_0912922.png
o_0912923.png

background-position(背景图起始位置):
上中: top 或者 top center
上左: top left(默认)
上右: top right
中心: center 或者 center center
中左: left 或者 center left
中右: right 或者center right
下中: bottom 或者 bottom center
下左: bottom left
下右: bottom right
还可以用百分比或具体的数值描述: x% y% 或 xpos ypos

o_0912924.png
o_0912925.png
o_0912926.png
o_0912927.png
o_0912928.png
o_0912929.png
o_0912930.png
o_0912931.png
o_0912932.png
o_0912933.png
o_0912934.png

background-position 本来就是有 x、y 两个值构成的, 也可用
background-position-x 和 background-position-y 单独设定.

background-attachment(设置背景是否随滚动条滚动): scroll(默认)、fixed(不滚动).

o_0912935.gif

用 background 可以同时设置:
background-color、background-attachment、background-image、background-position、background-repeat
竟没有顺序的要求, 也可随意省略, 只是 position 用两个值时不要分开即可.

o_0912936.png

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值