オーバーレイ画像は絶対に2divsの間

私は動的な高さ（ビューポートに基づく）を持ついくつかのセクションを持っており、セクション間の分割線としてimgを配置できる必要があります。私がそれをするために考えることができる唯一の方法は、イメージを絶対的に配置することです。問題は、私はいつも各セクションの固定された高さがどのようなものかわからないということです。オーバーレイ画像は絶対に2divsの間

位置：相対から空のスペースを残さずに、セクション自体を相対的に配置してセクションを追加できる方法があります。

.section { 
 
    width: 100%; 
 
    height: 200px; 
 
} 
 
.divider1 { 
 
    position: absolute; 
 
    left: calc(50vw - 100px); 
 
    top: 150px; 
 
} 
 
.divider2 { 
 
    position: absolute; 
 
    left: calc(50vw - 100px); 
 
    top: 350px; 
 
} 
 
.blue { 
 
    background-color: blue; 
 
} 
 
.red { 
 
    background-color: red; 
 
} 
 
.green { 
 
    background-color: green; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    <div class="section blue"></div> 
 
    <div class="divider1"> 
 
    <img width="200" height="100" src="http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg" /> 
 
    </div> 
 
    <div class="section red"></div> 
 
    <div class="divider2"> 
 
    <img width="200" height="100" src="http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg" /> 
 
    </div> 
 
    <div class="section green"></div> 
 
</body> 
 

 
</html>

出典

2016-12-22 Rey Garcia

部要素上に（私は::afterを使用した）擬似要素として分圧器を設定します。擬似要素をセクション要素の底部に関連して配置します。このようにして、セクションの高さが変わり、デバイダが適切な場所に配置されます。

注 - 最後のセクションで::afterを無効にできるように、divの内容をコンテナにラップする必要があります。

.section { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 200px; 
 
} 
 
.section:not(:last-child)::after { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 100px; 
 
    bottom: -50px; 
 
    left: calc(50% - 100px); 
 
    background: url(http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg) no-repeat; 
 
    background-size: contain; 
 
    content: ""; 
 
    z-index: 1; 
 
} 
 
.blue { 
 
    background-color: blue; 
 
} 
 
.red { 
 
    background-color: red; 
 
} 
 
.green { 
 
    background-color: green; 
 
}

<div> 
 
    <div class="section blue"></div> 
 

 
    <div class="section red"></div> 
 

 
    <div class="section green"></div> 
 
</div>

出典

2016-12-22 21:38:04

あなたのイメージは、安定した寸法がある場合：幅=「200pxの」高さ=「100pxに」、そして、あなたは絶対に色のdivの内側に配置し、親の高さとは無関係にそれらを配置することができます

を

.section { 
 
    width: 100%; 
 
    height: 50vh; 
 
    position: relative; 
 

 
} 
 
.section img { 
 
    width: 200px; 
 
    height: 100px; 
 
    display: block; 
 
    position: absolute; 
 
    margin-left: calc(50% - 100px); 
 
    margin-top: -50px; 
 
} 
 
.blue { 
 
    background-color: blue; 
 
} 
 
.red { 
 
    background-color: red; 
 
} 
 
.green { 
 
    background-color: green; 
 
}

<div class="section blue"></div> 
 
    <div class="section red"> 
 
    <img src="http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg" /> 
 
    </div> 
 
    <div class="section green"> 
 
     <img src="http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg" /> 
 
    </div>

出典

2016-12-22 21:44:42 Banzay

オーバーレイ画像は絶対に2divsの間

答えて

関連する問題