Html 在css中设置背景图像和颜色

我将设置背景图像和背景颜色这两者都很好，但问题是，当我在

div

上写入一些文本时，背景会自动应用到文本上。这是我的代码，请查看它

#画布预览{
宽度：200px；
边框：1px实心#000；
框大小：边框框；
位置：相对位置；
背景图像：url（'path/to/image.png'）；
}
#画布预览：：之前{
背景颜色：绿色；
内容：''；
显示：块；
身高：100%；
位置：绝对位置；
宽度：100%；
}
#自定义画布{
利润率：10px；
颜色：#fff；
}

有一些文字

添加

z-index:-1

到伪元素

#画布预览：：before

以使文本可见

当它以层的形式出现在

#画布预览中时，它可以作为备用，以防bg图像无法加载

因此，要使上面的文本层可见，需要降低伪元素的
z-index

更新的代码片段

#画布预览{
宽度：200px；
边框：1px实心#000000；
框大小：边框框；
位置：相对位置；
背景图片：url(https://hd.unsplash.com/photo-1463950922781-0e6d07cbd146);
}
#画布预览：：之前{
背景色：rgba（0,128,0,0.5）；
内容：''；
显示：块；
身高：100%；
位置：绝对位置；
宽度：100%；
z指数：1；
}
#自定义画布{
利润率：10px；
颜色：#ffffff；
z指数：2；
位置：相对位置；
}

有一些文字
添加
z-index:-1
到伪元素
#画布预览：：before
以使文本可见

当它以层的形式出现在
#画布预览中时，它可以作为备用，以防bg图像无法加载

因此，要使上面的文本层可见，需要降低伪元素的
z-index

更新的代码片段

#画布预览{
宽度：200px；
边框：1px实心#000000；
框大小：边框框；
位置：相对位置；
背景图片：url(https://hd.unsplash.com/photo-1463950922781-0e6d07cbd146);
}
#画布预览：：之前{
背景色：rgba（0,128,0,0.5）；
内容：''；
显示：块；
身高：100%；
位置：绝对位置；
宽度：100%；
z指数：1；
}
#自定义画布{
利润率：10px；
颜色：#ffffff；
z指数：2；
位置：相对位置；
}

有一些文字
我检查了您的代码，文本为白色。它就隐藏在这个绿色容器后面，因为：

 #canvas-preview::before

如果您删除before（仅用于测试目的），您将看到文本为白色。所以你需要一种不同的方法。代码很好。
我检查了您的代码，文本为白色。它就隐藏在这个绿色容器后面，因为：

 #canvas-preview::before

如果您删除before（仅用于测试目的），您将看到文本为白色。所以你需要一种不同的方法。代码正常。

#画布预览{
宽度：200px；
边框：1px实心#000；
框大小：边框框；
位置：相对位置；
背景图像：url（'http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=8c1c8cba242e');
}
#画布预览：：之前{
背景颜色：绿色；
内容：''；
显示：块；
身高：100%；
位置：绝对位置；
宽度：100%；
z-index:-99999；//在此css代码中添加z-index。
}
#自定义画布{
利润率：10px；
颜色：#fff；
}

有一些文字

#画布预览{
宽度：200px；
边框：1px实心#000；
框大小：边框框；
位置：相对位置；
背景图像：url（'http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=8c1c8cba242e');
}
#画布预览：：之前{
背景颜色：绿色；
内容：''；
显示：块；
身高：100%；
位置：绝对位置；
宽度：100%；
z-index:-99999；//在此css代码中添加z-index。
}
#自定义画布{
利润率：10px；
颜色：#fff；
}

有一些文字
CSS中的z-index属性控制重叠元素的垂直堆叠顺序。在中，哪一个看起来好像离你更近。z索引仅影响位置值不是静态（默认值）的元素

:

您的代码应更改如下：

#canvas-preview::before{
 background-color:green;
 content: '';
 display: block;
 height: 100%;
 position: absolute;
 width: 100%;
 z-index:-1;
}
#custom-canvas{
 margin:10px;
 color:#fff;
}

这可能会有所帮助。
CSS中的z-index属性控制重叠元素的垂直堆叠顺序。在中，哪一个看起来好像离你更近。z索引仅影响位置值不是静态（默认值）的元素

:

您的代码应更改如下：

#canvas-preview::before{
 background-color:green;
 content: '';
 display: block;
 height: 100%;
 position: absolute;
 width: 100%;
 z-index:-1;
}
#custom-canvas{
 margin:10px;
 color:#fff;
}

这可能会有帮助。
简单的
-1
就足够了，没有必要浪费你的
z-index
值；）请看updation@AzeemHaider上面的代码同时显示背景img和背景颜色。简单的
-1
就足够了，没有必要浪费你的
z-index
值；）请看updation@AzeemHaider上面的代码显示了背景图像和背景颜色。请查看更新请查看更新