1

これが可能かどうかはわかりませんが、「境界」の背景を持つdivがあります。このdivの中には、コンテンツを保持する別のdivがあり、このdivを境界線の下に表示したいと思います。

これはCSSで行うことができますか？

編集：急いでそれを書いて申し訳ありません、私はもっと説明しようとします。

親divは、次のようにbackground-imageを使用します。

background-image: url(images/SomeImage.png)

SomeImage.pngは、divの上部に表示される単なるカスタム境界線です。

この親div内に子divがあり、SomeImage.pngの下に表示したいと思います。これは可能ですか？

4

5 に答える 5

1

このようなことをします：

HTML

<div id="border-bg">
   <div id="content">
      Your content goes here
   </div>
</div>​

CSS

​#border-bg {
    background:url(images/border.png) no-repeat;
    z-index:100;
    position:relative;
}
#border {
    z-index:10;
    position:relative;
}​

ボーダー画像のwidthとを必ず追加してください。height

z-indexプロパティは、要素のスタック順序を指定します。スタック順序が大きい要素は、常にスタック順序が小さい要素の前にあります。

z-indexの詳細については、これを確認してください

于 2012-05-13T16:14:32.497 に答える
1

それは可能です。親divの不透明度を変更してみてください。たとえば、$（ "＃childdiv"）。css（{opacity：1.0}）; $（ "＃parentdiv"）。css（{不透明度：0.75}）;

于 2012-05-13T16:15:30.047 に答える
1

コンテンツdivに内部シャドウhttp://sublimeorange.com/css/css3-inner-shadow/を適用したいと思いますか？

<div id="border-frame" style="padding: 10px; background-color: red">
<div id="content" style="padding: 10px; box-shadow:inset 0 0 10px #000000; background-color:white"> 
this is some great text
</div>
</div>

http://jsfiddle.net/gzbVG/

于 2012-05-13T16:16:08.007 に答える
1

「背景画像」を別のdivに配置し、負の余白を使用することになりました。混乱して申し訳ありませんが、他の解決策はどれも私にはうまくいきませんでした。

于 2012-05-13T16:25:51.393 に答える
1

これを捨てるだけです...ログイン画面の後ろに背景画像を配置するためにこれを使用しています...

 <table align=center width=100% border=0 cellpadding=0 cellspacing=0    background="images/image.png" STYLE="background-repeat: no-repeat; background-position:center">
 <tr>
 <td align=center valign=middle height="350" background="images/loginimage.png"  STYLE="background-repeat: no-repeat; background-position:center">

 Content Here

 </td>
 </tr>
 </table>
于 2012-05-13T16:58:23.747 に答える