博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css [background-position] 单位
阅读量:5960 次
发布时间:2019-06-19

本文共 714 字,大约阅读时间需要 2 分钟。

背景:写骨架屏样式时,尝试背景线性渐变 linear-gradient + 动画 @keyframes: background-position-x来实现背景的移动,因宽度为100%,用background-position-x: 100%,无效

background-position

  • 作用:在容器中移动 background-image 或 渐变
  • 默认值:0 0
  • 单位: length | percentages | keywords
  1. length

    非常好理解

  2. percentages:x% (假设是x方向的)

    将背景x%处移动到容器的x%

    -> 当 background-size 充满容器时,x为多少都没有效果!

  3. top | right | bottom | left | center

    只是百分比的别名

    且 top center = center top (顺序both OK)

    当还未定义水平位置时,center指水平方向,

    因此 center 10% ≠ 10% center

Pay Attention - 值的个数

一个:指水平方向,垂直方向默认center

两个:水平 垂直


(以下:注意浏览器兼容性)

三个:keywords(除center) length | percentages keywords(除center) [省略第四个值0]

四个:keywords(除center) length | percentages keywords(除center) length | percentages

转载于:https://juejin.im/post/5ab24b246fb9a028cf325bac

你可能感兴趣的文章
存储方案与存储产品之NAS篇
查看>>
鸟哥学习笔记---网络基本管理
查看>>
鸟哥学习笔记---SAMBA
查看>>
JSON.parse()和JSON.stringify()
查看>>
完整的WordPress函数大全
查看>>
Citrix xenapp记录
查看>>
2011,我的IT我的梦
查看>>
×××lamp
查看>>
LAMP+Postfix+Dovecot+Postfixadmin搭建邮件管理系统(七)
查看>>
MooseFS(MFS)安装手记(二)
查看>>
我的友情链接
查看>>
第二章Java语言基本语法————数据类型
查看>>
Linux下安装Sybase
查看>>
金蝶记账王用试算平衡表的教程
查看>>
如何从架构与测试推动敏捷开发_主頁
查看>>
adb操作命令
查看>>
OFBiz支持https设置
查看>>
Spacemacs快捷键
查看>>
linux运维命令wc学习
查看>>
Solaris 10 vi 操作
查看>>