CSS中设置背景图的方位设置

在css中如果想要设置背景图的位置,就需要设置background-position 属性值 ;

background-position 属性值 可以是 length 长度 , 也可以是 position 方位 ;

在一个固定大小盒子中,如果盒子大小大于图片的大小,那么背景图会置于盒子的左上角的位置。

CSS的语法格式如下:

background-position : length length
background-position : position position 

其中length 长度设置的数值如下写法 :
百分数 : 如 50% ;
浮点数 + 单位 : 如 : 150.5px ;
position 方位设置的属性如下 :
左上右下 : top , bottom , left , right ;
中间 : center

其中注意:设置的是 x 坐标的方位 和 y 坐标的方位 , 二者使用空格隔开 ;

注意事项:

  • 设置背景图片 : 设置 background-position 属性值 之前 需要先设置 background-image 背景图片属性
  • 方位设置 : 如果设置 position 方位属性值 , 设置的是 x 坐标的方位 和 y 坐标的方位 , 使用空格隔开
  • 顺序无关 : 如果指定了两个方位值 , 则 自动匹配顺序 , 先后顺序无关
  • 设置一个值left、right、top : 如果 只设置了一个方位值 , 那么另外一个默认居中对齐
    • 设置了 left , 则垂直方向居中对齐 ;
    • 设置了 top , 则水平方向居中对齐 ;
  • 坐标(x,y)设置 : 如果 设置的是 length 长度坐标 , 则 第一个数值是 x 坐标 , 第二个数值是 y 坐标
    • 设置了一个值 : 如果 只设置了一个坐标值 , 那么该设置为 x 坐标设置 , 垂直方向默认居中设置
    • 同时设置放位和坐标 : 第一个值默认是 x 坐标 , 第二个值为 y 坐标


暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇