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

只需从图片网址中删除不需要的\即可。请查看下面的代码段以供参考。

<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后面

2 个答案: