1

img html タグの上に表示する div 背景画像を取得するにはどうすればよいですか。これを行う理由は、バナーで回転する画像をオーバーレイする半透明のテクスチャのためです。毎回画像でテクスチャをカットする必要はありません。そうすれば、将来の画像の追加/更新が高速になります。この投稿に記載されているアドバイスを試してみましたが、うまくいかないようでした: CSS show div background image on top of other included elements . 助けてくれてありがとう。

html:

<div id="sliderFrame">
    <div id="slider">
        <span id="slider-background">
            <img src="/_images/rotating-banner/001.jpg" />
        </span>
    </div>
</div>

CSS:

#sliderFrame {position:relative;width:850px;margin: 0 auto;} 

#slider {
  width:850px;height:470px;/* Make it the same size as your images */
  background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
  position:relative;
  margin:0 auto;/*make the image slider center-aligned */
  box-shadow: 0px 1px 5px #999999;
}

#slider-background{
  position:absolute;
  background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
  width: 850px;
  height: 470px;
  z-index: 100;
}

ライブ サイトへのリンク: http://lltc.designangler.com/

4

4 に答える 4

1

試す：

HTML:

<div id="wrapper">
    <div id="img"></div>
    <div id="overlay"></div>
</div>

CSS:

#wrappaer{display:inline-block; position:relative; width:100px; height:100px;
     box-shadow: 0px 1px 5px #999999;}
#img{display:block; position:absolute; z-index:1}
#overlay{display:block; position:absolute; z-index:2
     opacity:0.3;
     filter:alpha(opacity=30); /* For IE8 and earlier */}

ラッパー、画像、オーバーレイのサイズを調整し、画像を追加してください。

于 2013-11-06T19:14:59.130 に答える
0

背景画像は、その名前が示すように、子要素の前に配置することはできません。したがって、その背景画像をスライドショーにオーバーレイするには、絶対配置に依存する必要があります。

#sliderFrame {
    position: relative;
    width: 850px;
    margin: 0 auto;
}
#slider {
    width:850px;
    height:470px;
    background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
    position:relative;
    margin:0 auto;
    box-shadow: 0px 1px 5px #999999;
}
#slider-background {
    display: block;
    position: relative;
    width: 850px;
    height: 470px;
    z-index: 100;
}
#slider-background:before {
    background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
}
#slider-background img {
    display: block;
}

要素自体の上に完全に配置された疑似要素を使用することにしまし#slider-backgroundた。4 つのオフセットすべてを 0 に設定することで、要素の次元まで拡張されます。また、#slider-backgroundとその子<img>要素をブロックレベルとして宣言する必要があることに注意してください要素。

http://jsfiddle.net/teddyrised/XJFqc/

于 2013-11-06T20:34:40.370 に答える