将图像置于 RGBA 之后

Question

我怎么把图像放在后面，RGBA？

原码：

<div style="width: 266px; height: 266px; border: 3px solid red;
  background: 
    linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 49.25%, rgba(0,255,0,1) 50%, rgba(0,0,0,0) 50.75%, rgba(0,0,0,0) 100%), 
    linear-gradient(to top right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 49.25%, rgba(255,230,0,1) 50%, rgba(0,0,0,1) 50.75%, rgba(0,0,0,1) 100%);">
</div>

我把它改成了这样：但是它不起作用。

<div style="width: 266px; height: 266px; border: 3px solid red;
  background: 
    linear-gradient(to top left, rgba(225, 225, 225, 0.0) 0%,
           rgba(225, 225, 225, 0.0) 49.25%,
           rgba(0,255,0,1) 50%,
           rgba(225, 225, 225, 0.0) 50.75%,
           rgba(225, 225, 225, 0.0) 100%), 
    linear-gradient(to top right, rgba(225, 225, 225, 0.0) 0%,
           rgba(225, 225, 225, 0.0) 49.25%,
           rgba(255,230,0,1) 50%,
           rgba(225, 225, 225, 0.0) 50.75%,
           rgba(225, 225, 225, 0.0) 100%), url(\'http://via.placeholder.com/260x260\');">
</div>

Answer 1

只需从图像 url 中删除不需要的 \。检查以下代码段以供参考。

<div style="width: 266px; height: 266px; border: 3px solid red;
  background: 
    linear-gradient(to top left, rgba(225, 225, 225, 0.0) 0%,
           rgba(225, 225, 225, 0.0) 49.25%,
           rgba(0,255,0,1) 50%,
           rgba(225, 225, 225, 0.0) 50.75%,
           rgba(225, 225, 225, 0.0) 100%), 
    linear-gradient(to top right, rgba(225, 225, 225, 0.0) 0%,
           rgba(225, 225, 225, 0.0) 49.25%,
           rgba(255,230,0,1) 50%,
           rgba(225, 225, 225, 0.0) 50.75%,
           rgba(225, 225, 225, 0.0) 100%), url('http://via.placeholder.com/260x260');">
</div>

Answer 2

创建一个内容包装器并将图像作为包装器的背景。

.wrapper {
  background: url('http://via.placeholder.com/260x260');
  height: 260px;
  width: 260px;
}

.rgba {
  background: rgba(100, 255, 0, .5);
  height: 260px;
  width: 260px;
}

<div class="wrapper">
  <div class="rgba">
  </div>
</div>

将图像置于 RGBA 之后

Putting an Image behind RGBA

html

image

rgba