background-size笔记

在使用background-size的时候遇到的一点点的疑惑,所以重温一下background-size的一些用法。

语法:

background-size:auto|length|cover|contain|initial|inherit;
  • 默认值:auto;
  • length(绝对值):设置背景图片的宽高。若第一个被设定了,那么第二个的值为auto;
  • percentage(百分比):相对父元素宽高的百分比来设置背景图片的大小。
  • cover:拉伸背景图片以使背景图片尽可能的铺满背景区域。致使部分图片可能不会在背景区域内。
  • contain:缩放图片使得它的宽高都能被包含在内容区域内。
  • initial:初始化
  • inherit: 继承

总结:

  • background的缩写:background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

如果同时简写bg-position和bg-size的话中间要加斜杠/;若同时使用多个图片背景,并且需要背景颜色的话,背景颜色属性需放到最后

  • 百分比设置是相对于父元素,而不是相对于本身,这个应该注意一下。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容