画像を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>