7

これは不可能だと思いますが、私はCSSの専門家ではないので、確認したいと思いました。画像の上に絶対に配置された半透明のdivがあります。これまでのところそれは良いことですが、半透明のdivに、それと画像が含まれているボックスを尊重するように強制したいと思います。

<div class="parent">
  <div class="title-bar"> /* prolly not important */
    <h2>Title</h2>
  </div>
  <img src="whatever"/>
  <div class="overlay">
    A few lines of txt
  </div>
</div>

考えれば考えるほど、要求が多すぎると思います。親をimgで拡張したいのですが、オーバーレイは親によって制約されます。これはできますか？

4

2 に答える 2

9

コンテナを子と一緒に強制的に拡張するにはimg、それを作成しfloatます。
オーバーレイをコンテナの位置とサイズに強制的に関連付けるには、コンテナを作成しrelativeます。

.parent {
    float: left;
    position: relative;
}

オーバーレイがコンテナの境界を尊重するようにするには、パーセントを使用します。

.overlay {
    position: absolute;
    max-width: 100%;
    /* And then, position it at will */
    top: 0;
    left: 0;
}

例を用意しました：http：//jsfiddle.net/rYnVL/

于 2012-09-25T15:32:02.127 に答える
1

それは 実行可能ですが、それほど美しくはありません：

<div id="parent">
    <div id="abs">stuff fadsfasd fsad fasdsdaf </div>
    <img src="/img/logo.png" />
</div>

#parent {width:auto; height:auto; border:1px solid blue; background-color:grey;position:relative; display:block;float:left;}

#abs {position:absolute;width:100%;height:100%;background:#ff0000;opacity:0.4;}

注意すべき主なポイント：
parent100％の幅を持たないように浮きます。位置は相対的です。
abs絶対サイズで、100％のサイズです。

また、absコンテンツが画像よりも大きい場合は、オーバーフローします。これが気に入らない場合は、を追加してoverflow:hiddenください。

于 2012-09-25T15:33:08.487 に答える