美文网首页
background

background

作者: 白璞1024 | 来源:发表于2018-12-09 10:43 被阅读0次

1 css3中出现的特性:

  • Multiple background多背景
  • background-size
  • background-orign背景的初始定位盒子
  • backgound-clip背景剪切盒子

2 关于back-gound的几个注意点

1> 以下的几个在ie9上兼容

  • background-size
  • background-orign背景的初始定位盒子 padding-box
  • backgound-clip背景剪切盒子 border-box
  • backgound-image
  • backgound-position:0% 0%
  • backgound-repeat:repeat
  • backgound-attachment:scroll
  • backgound-color:transparent

2> background-image在隐藏元素的加载情况

display:none的时候,ie依然会请求图片的 firefox不会,chrome如果本元素隐藏但是有backround-image,依然会加载image的,但是如果是父元素有display:none的情况,就不会进行加载了

3> base64渲染图片性能并不高,适合尺寸比较小的图片

如果需要实现鼠标光标经过图片颜色变换的效果,务必使用一张图片这种用户体验会好很多

4> backgound-position

1、缺省值是center
2、posiiton的百分比计算规则(这里的position只针对于background-position
positionX = (容器的宽度-图片的宽度) *percentX;
positionY = (容器的高度-图片的高度)* percetnY;
当容器小于图片的大小的时候,两个相减就会变成负数

5> backgound-color永远在最底下

利用这个特性,可以实现 在:active的时候,不用每个元素都替代了,而是用background-image来实现覆盖原来的背景色

相关文章

网友评论

      本文标题:background

      本文链接:https://www.haomeiwen.com/subject/gzshhqtx.html