CSS:CSS背景位置postion及背景附着attachment

CSS中不仅可以换背景色也可以把背景换成图片。
如何给背景换图片?
代码如下:

background-image:url(要更换的图片地址);

在实际开发中,我们会改变图片的位置,比如靠左、靠右、靠上、靠下,或精确到几像素,这时候就要用到postion定位了。

background-postion:X坐标 Y坐标;

关于X坐标和Y坐标的值有两种表达方式,一种是方位名词,例:left top right bottom;一种是精确坐标,例:10px 15px 25px。
在使用背景位置postion时需要注意

  • 必须要先有background-image属性,没有这个属性哪来的背景定位呢?
  • postion后跟的值如果是方位名词,两个值的前后顺序五官,例left top和top left效果是一样的。
  • 如果只指定了一个方位名词,另一个默认是居中对齐的。
  • postion后跟的值是精确坐标,那么第一个必须是X坐标,第二个必须是Y坐标,顺序不能颠倒。
  • 如果只指定了一个精确数值,另一个也是默认居中对齐的。
  • 方位名词和精确坐标是可以混合使用的,例10px center,但第一个值一定是X,第二个值一定是Y。
    背景附着
    背景附着就是背景是滚动的还是固定的。
    语法:background-attachment:scroll或fixed;
    scroll表示背景图像随着内容而滚动;
    fixed表示背景图像固定;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值