Question

我要设置背景图片和背景颜色这两个工作正常但问题是，当我在div上写一些文字时，背景自动应用于文字这里是我的代码请查看它

#canvas-preview {
  width: 200px;
  border: 1px solid #000;
  box-sizing: border-box;
  position: relative;
  background-image: url('path/to/image.png');
}
#canvas-preview::before {
  background-color: green;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
}
#custom-canvas {
  margin: 10px;
  color: #fff;
}

<div id="canvas-preview">
  <div id="custom-canvas">There is some text</div>
</div>

我想将文字颜色设置为白色。这段代码有什么问题。

更新

我需要background-image和background-color 例如，opacity: 0.37图像上的绿色抱歉，我忘记了在opacity

中放置css媒体资源

  #canvas-preview::before {
  background-color: green;
  opacity: 0.37;   /* editing in code */
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
}

我需要两件事而不是一件事。

Answer 1

将z-index:-1;添加到您的伪元素#canvas-preview::before，以使文字

可见

当它作为一个图层来到#canvas-preview时，如果您的 bg-image 无法加载，那么它将作为后备。

因此，为了使文本层可见，您需要降低伪元素的z-index。

更新了代码段

＆＃13;

#canvas-preview {
  width: 200px;
  border: 1px solid #000000;
  box-sizing: border-box;
  position: relative;
  background-image: url(https://hd.unsplash.com/photo-1463950922781-0e6d07cbd146);
}
#canvas-preview::before {
  background-color: rgba(0, 128, 0, 0.5);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 1;
}
#custom-canvas {
  margin: 10px;
  color: #ffffff;
  z-index: 2;
  position: relative;
}

＆＃13;

<div id="canvas-preview">
  <div id="custom-canvas">There is some text</div>
</div>

＆＃13;

我建议您在opacity元素中使用 bg-color (rgba)的 alpha 值，而不是添加pseudo这将是一个更好的解决方案。

Answer 2

我检查了你的代码，文字是白色的。由于这个原因，它隐藏在这个绿色容器后面：

 #canvas-preview::before

如果您在事物之前删除（仅用于测试目的），您将看到文本为白色。所以你需要一个不同的方法。代码很好。

Answer 3

＆＃13;

#canvas-preview{
        width:200px;
        border:1px solid #000;
        box-sizing: border-box;
        position: relative;
        background-image: url('http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=8c1c8cba242e');
  
    }
    #canvas-preview::before{
        background-color:green;
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        width: 100%;
       z-index:-99999; // add z-index in this css code.
    }
    #custom-canvas{
        margin:10px;
        color:#fff;
      
    }

＆＃13;

    <div id="canvas-preview">
            <div id="custom-canvas">There is some text</div>
    </div>

＆＃13;

Answer 4

CSS中的z-index属性控制重叠元素的垂直堆叠顺序。如同，在哪一个看起来好像它在物理上更接近你。 z-index仅影响位置值不是静态的元素（默认值）。

Reference：

您的代码应该像这样更改：

SELECT 
rps_checklist.id, school_id,application_type,school_year
FROM rps_checklist
  INNER JOIN (
    SELECT id, MAX(id) AS maxx FROM rps_checklist GROUP BY school_id
  ) ms ON rps_checklist.id = maxx

这可能会有所帮助。

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

4 个答案:

更新了代码段