图解 CSS (4): background - 背景
图解 CSS (4): background - 背景
涂孟超 发表于3年前
图解 CSS (4): background - 背景
  • 发表于 3年前
  • 阅读 1
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

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

 
 
 
 
 

 

 

  

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



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



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






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













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

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



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



  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 12
博文 2004
码字总数 14107
×
涂孟超
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: