0

オーバーレイの暗い背景とキャプション テキストを持つ画像でギャラリーを作成しています。配置は問題ありませんが、コンテナ要素でパディングが使用されているため、オーバーレイ div が画像の境界から外れています。

border-box私はいくつかの場所でそれについて読み、この問題を解決できることを学びましたが、そうではありません. ここで何か間違ったことをしていますか？コードをチェックしてください：

HTML:

<div class="dest-item">
 <img src="http://lorempixel.com/500/400">
  <div class="dest-caption">
    <div class="dest-text">
          <h3>This is a caption</h3>
    </div>
  </div>
</div>

CSS:

.dest-item{
    position:relative;
    overflow:hidden;
    z-index:1;
    padding:10px;
  width: 500px;
}

.dest-item img{
    width: 100%;
}

.dest-caption{
    position: absolute;
    top: 0px;
    background: rgba(0,0,0,0.2);
    z-index: 2;
    width: 100%;
    height: 100%;
  box-sizing: border-box;
}

.dest-text{
    position: absolute;
    bottom: 0;
    background: rgba(255,255,255,0.9);
    width: 100%;
    padding: 0px 10px;
}

プレイグラウンド リンク:コード ペン

4

4 に答える 4

1

dest-itemdiv全体からパディングを削除します。私が思うように、そこにそのパディングは必要ありません:

.dest-item {
  position: relative;
  overflow: hidden;
  z-index: 1;
  /* padding: 10px; */
  width: 500px;
}
于 2015-03-14T11:32:31.947 に答える
0

やりたいことをするのにボーダーボックスは必要ありません。

ボックスのサイズには 3 つのタイプがあります。

content-boxはデフォルトの動作で、幅と高さのみが含まれます。パディングや境界線の幅は考慮されません。幅 500px + パディング 10px + ボーダー 1px の要素がある場合、要素全体の表示サイズは幅 522px で、実際のコンテンツに使用できるスペースのサイズは 500px です。

padding-boxにはパディングが含まれますが、境界線は含まれません。上記と同じ例で、padding-box を使用している場合、表示サイズは 502px ですが、使用可能なコンテンツ スペースは 480px です。

border-boxはすべてをカバーします。この例では、表示サイズは 500px ですが、コンテンツに使用できるスペースは 478px です。

いずれの場合も、余白はサイズにカウントされません。

最終結果をどのように見せたいかによって、これを別の方法で実現しますが、Code Pen サンプルに基づいて、アイテム コンテナー全体を塗りつぶして、オーバーレイが 10 ピクセルのパディングもカバーするようにします。ボックスのサイズを変更せずにこれを行うことができます。

まず、パディングを考慮して .dest-caption 要素を左に 10px オフセットする必要があります。次に、10px のパディングを追加し、border-box 属性を削除する必要があります。

このような：

.dest-caption {
    position: absolute;
    top: 0px;
    left: -10px; /* offset */
    background: rgba(0,0,0,0.5);
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 10px; /* add padding */
}

これを修正すると、テキストとそのボックスの位置がずれ、ボックスのサイズが適切に制御されなくなります。H3タグの余白の影響を受けます。.dest-text 要素内の H3 タグからマージンを削除して、これを修正します。

.dest-text H3 {
    margin: 0px;
}

H3 タグに余白がない場合、テキスト オーバーレイは位置合わせがずれているため、描画可能領域から実際には消えてしまいます。これを修正するには、.dest-text を下から .dest-caption パディング幅 (x2) だけオフセットします。おそらく、.dest-text の上下のパディングも必要になるでしょう。

.dest-text {
    position: absolute;
    bottom: 20px; /* account for padding on .dest-caption */
    background: rgba(255,255,255,0.9);
    width: 100%;
    padding: 10px 10px; /* add top/bottom padding */
}

コードペンリンク

于 2015-03-14T12:32:17.410 に答える