「CSS」背景图探索

进击的Oliver
733 阅读2分钟

前言

业务需求为使用两张图片纵向拼接作为页面背景，其余位置使用纯色填充，作为下拉加载更多的背景使用。

惯性思维

在以往的开发过程中，并没有接触过如此复杂的关于背景的需求。

于是首先想到的是使用image做作为背景图片，通过设置绝对定位使其脱离文档流。写法大致如下

<div class="p-i">
	<div class="p-i-bg">
		<image src="xxx" class="p-i-bg-bgTop"/>
		<image src="xxx" class="p-i-bg-bgMid"/>
	</div>
	<!-- 主体内容 content -->
</div>


.p-i{
  width: 100vw;
  min-height: 100vh;
  background: grey;
  /* position: relative */
  /* z-index: -2 */
  &-bg{
    position: absolute;
    /* z-index: -1 */
    &-bgTop{
    	width: 100vw;
    }
    &-bgMid{
    	width: 100vw;
    }
  }
}

预期是 p-i-bg 模块整体都处于下层，而页面的主体内容content会浮于上方，从页面的顶部向下排列， p-i-bg 模块下方填充灰色背景。

实际观察发现 p-i-bg 模块遮住了主体内容；若设置 p-i-bg 的 z-index: -1， p-i-bg 模块的内容索性直接不可见了，而显示灰色背景。

引出问题：层叠上下文

  • 关于层叠上下文，详细讲解可以参考张鑫旭的博客：www.zhangxinxu.com/wordpress/2…

  • 总结结论，层叠优先级：

    background/border< 负的z-index< block块状水平盒子< float浮动盒子< inline水平盒子< z-index:auto/z-index:0< 正的z-index

    依据这种规则，我们可以发现。在 p-i-bg 模块声明为绝对定位后，z-index默认初始化为auto，则它的优先级是比普通的block块盒子高的，所以它会盖在主体内容上边。

解决方法

  1. 可以通过设置层级关系解决：
  1. 显式地将 p-i 页面设置为相对定位并规定z-index为-2；
  2. 将 p-i-bg 模块的z-index置为-1；
  1. 此时就会按照 纯色背景-> p-i-bg 模块 -> 主体内容 顺序展示页面了。
  1. 使用css background属性一把梭哈。

background大法好

之前只使用过纯色背景、单张图片背景，但没有尝试过复杂背景需求下使用background属性来完成。

查阅发现background的能力远比我想象中的强大，详细参考MDN：developer.mozilla.org/zh-CN/docs/…

总结一下，background支持单种背景，也支持多种背景相拼接，可以使用逗号隔开。

  • 合并写法
.class-name{
	background: url('xx') no-repeat width height,
    					url('yy') no-repeat width height,
    					grey;
}
  • 单独写法
.class-name{
	background-image: url('../../assets/index/background-top.png'),
    url('../../assets/index/background-middle.png');
  background-repeat: no-repeat, no-repeat;
  background-color: #B7C6D3;
  background-size: w1 h1, w2 h2;
  background-position: 0 0, 0 h1;	// 背景左上角坐标
}

使用background属性完美适应了场景，并且写法优美结构清晰。

以后再也不用image写背景咯~

avatar
文章
阅读
粉丝