2つの表の行にまたがって背景色が異なるが、背景色が異なる

Question

テーブルにする必要はありません。divにすることができます。

画像には透明な部分が混在しています。上部は、下半分とは異なる背景色と混ざり合う必要があります。

私の考えでは、2行のテーブルがあり、一方の行には背景色があり、もう一方の色には別の背景色がありますが、イメージは両方の行にまたがります。

これはHTML/CSSで可能ですか？これは私がイメージを2つに切断するのを避けるでしょう。

Answer 1

イメージまたは行は固定サイズですか？その後、背景の位置決め& /またはサイジングで遊ぶことができます。論理的に

.row { 
 
    height: 100px; 
 
    background-image: url(http://www.fillmurray.com/1000/200); 
 
    border: 1px solid red; 
 
    width: 500px; 
 
    margin: auto; 
 
} 
 
.one { 
 
    background-position: top center; 
 
    margin-top: 1em; 
 
} 
 
.two { 
 
    background-position: bottom center; 
 
    margin-bottom: 1em; 
 
}

<div class="row one"></div> 
 
<div class="row two"></div>

または、おそらくのdivに「行」をラップし、その上でのBG画像を置くために容易になるだろうけれども。

.row { 
 
    height: 100px; 
 
    background-image: url(http://www.fillmurray.com/1000/200); 
 
    border:1px solid red; 
 
    width: 500px; 
 
    margin: auto; 
 
    
 
} 
 

 
.wrapper { 
 
    background-image: url(http://www.fillmurray.com/1000/200); 
 
    width: 500px; 
 
    background-position: center; 
 
    margin: 1em auto; 
 
} 
 

 
.wrapper .row { 
 
    background-image: none; 
 
}

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