首先背景图片一定是在背景颜色上面的，而背景图片一定是在内容下面的。要不然就不会叫做背景了。但是你这样的需求也是可以做的。
首先你设置一个div,根据根元素进行定位，width：100%height:100%position: absolute；top：0；left：0z-index:999 然后在里面放图片，设置display:blockwidth:100%这样就相当于设置了一个背景，然后你在其他地方设置的图片就会在这个图片（背景）的下面了。
这个是页面代码，图片你设置成你自己的就行。
请点击输入图片描述
首先纠正一下，你这个是 css 不是 html.portfolio .label-text{
}
这里的意思是给：类名选择器为 portfolio 的后代的所有 类名选择器为 label-text 的标签设置样式。
里面的样式解析：
position:relative是相对定位的意思，如果它的子级元素设置了 position: absolute
则为子级元素根据当前元素来进行定位，如果子级元素没有设置 position: absolute则为当前元素相对于自身进行定位。
z-index:500这个样式为元素设置堆叠顺序。例如你有几本书，叠着放在桌子上，你一样只能看见最上面的那本，但是你想放那本在最上面呢？ 通过 z-index 就可以设置元素在最上面。
padding:5px 8pxpadding的作用就是设置内边距（也叫内补）第一个参数为设置上和下的内边距分别为 5px , 第二个参数为设置 左 和 右 的内边距分别为 8px；
首先说，z-index不是HTML中的标签,而是css中的一个属性。
z-index 属性的意思是：设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。简单的说就是利用这个属性可以把一段文字置于一张图片之上，或者把图片置于文字之上，只要设置好合适的优先级就可以了。
举个实例可以清楚的说明白这个标签，例如：
<html><head>
<style type="text/css">
img.x
{
position:absolute
left:0px
top:0px
z-index:-1
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<img class="x" src="/i/eg_mouse.jpg" />
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
</body>
</html>
效果如下：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）