css3难度不大,就是细节比较,需要一 一测试,你不测试,你就是搞不定

css 背景测试

 

css 背景测试

也就是说,默认的话,背景颜色,或者背景图片,从padding-box 开始!

这是第一个需要测试的!图片作为背景也一样:

css 背景测试


若图片的大小,超出padding-box 的大小,那么图片只会显示一部分,从图片的左上角开始显示,不会自动的缩放!

若图片的大小小于Padding-box 的大小,则会进行平铺操作!

我们把背景变成小图片,则默认平铺!

css 背景测试

css 背景测试

css 背景测试


下面我们来介绍一下,background-position ,这个需要详细介绍下,大家不要着急, 前端,没含量,但是需要耐心测!

css 背景测试

显示效果:

css 背景测试

基本原理就是,若background-position 指定一个值,该值将做为背景图的横轴坐标

y 轴坐标为50% 50% 的概念是,(paddingbox 的高度- 图片的高度) * 50% 作为背景图片的起点的Y轴坐标!

css 背景测试


当然也可以指定

css 背景测试


这一小节,我们就先讲到这,三个css2 的背景属性的理解! 下一节我们讲css3 新增的背景属性

相关文章:

  • 2021-10-09
  • 2022-02-18
  • 2021-12-06
猜你喜欢
  • 2021-11-29
  • 2021-12-06
  • 2022-12-23
  • 2021-12-06
  • 2021-06-22
相关资源
相似解决方案