首页 \ 问答 \ 在css中设置背景图像和颜色(Set background image and color in css)

在css中设置背景图像和颜色(Set background image and color in css)

 我要设置背景图像和背景颜色这两个工作正常但问题是，当我在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> 
  
 
 
 我想将文字颜色设置为白色。 这段代码有什么问题。  
 UPDATE  
 我需要background-image和background-color 。 
 例如图像上的绿色与opacity: 0.37对不起，我忘记了在css放置opacity属性  
  #canvas-preview::before {
  background-color: green;
  opacity: 0.37;   /* editing in code */
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
}
 
 我需要两件事而不是一件事。 

I'm going to set background image and background color both this is working fine but the problem is that when I write some text on a div the background automatically apply on the text here is my code please review it. 
 
 
  
  #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> 
  
 
 
I want to set text color white. What's the problem with this code. 
UPDATE 
I need both background-image and background-color.
 For example green color over the image with opacity: 0.37 Sorry, I forgot the placing opacity property in css 
  #canvas-preview::before {
  background-color: green;
  opacity: 0.37;   /* editing in code */
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
}
 
I need both things not one.

原文：https://stackoverflow.com/questions/39341655

更新时间：2023-04-02 07:04

最满意答案

 您需要将$readable myCustomIncrement()值传递给myCustomIncrement()方法并使其增加。 所以你的myCustomIncrement()和myCustomOutput()方法将是这样的：  
protected function myCustomIncrement($readable) {
    return ++$readable;
}

public function myCustomOutput() {
    foreach( $this->my_array as $single ) {
        $readable = $single['level_1']['level_2']['level_3']['something'];
        return $this->myCustomIncrement($readable);
    }
}
 
 使增量操作预先增量，如return ++$readable; ，而不是后增量，以便该方法可以返回更新的值。 

You need to pass $readable value to myCustomIncrement() method and have it incremented there. So your myCustomIncrement() and myCustomOutput() methods would be like this: 
protected function myCustomIncrement($readable) {
    return ++$readable;
}

public function myCustomOutput() {
    foreach( $this->my_array as $single ) {
        $readable = $single['level_1']['level_2']['level_3']['something'];
        return $this->myCustomIncrement($readable);
    }
}
 
Make the increment operation pre-increment like return ++$readable;, not post-increment, so that the method could return the updated value.

在css中设置背景图像和颜色(Set background image and color in css)

最满意答案

相关问答

在课堂上找不到字段(Field not found in class)[2021-11-11]

在课堂上正确使用include(Using include in class properly)[2021-10-11]

PHP foreach，if语句(PHP foreach, if statement)[2021-10-01]

Foreach中的Foreach和if语句(PHP Foreach in Foreach with if statement)[2021-03-02]

为什么我不能在我的课堂上使用foreach？(Why can't I use foreach on my Class?)[2022-10-05]

在课堂上返回当前$ this(Return current $this in a class)[2022-02-16]

在课堂上验证物品的良好做法。(Good practice for validating items in class.)[2023-04-05]

在课堂上使用特征，为什么？(Using traits over classes, why?)[2021-12-12]

PHP - 在课堂上/ foreach：卡住了，无法弄清楚该怎么做(PHP - While/foreach in a class: stuck, can’t figure out what to do)[2023-08-10]

Dictonaries和Lambda在课堂上？(Dictonaries and Lambda inside a class?)[2023-07-26]

相关文章

最新问答