2

フルスクリーン カバーの背景があり、その上にフッターを配置して背景を暗くしようとしています。ただし、その上に写真を配置する必要もあり、暗くなります。z-index とスライスされたイメージを透明度で使用しようとしましたが、青だけで機能しませんでした。

#footer {
height: 100px;
opacity: 0.4;
background-color: #000000;
}
html { 
  background: url(background.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  width: 100%;
}

どんな助けでも大歓迎です。

編集：

z-indexをまったく使用せずに、上に別のdiv要素を負のマージンで追加するだけで解決できました

    <div id="footer">
    </div>
    <div id="footer-main">
    <img src="uqu-logo.png">
    <p>Got question? Check our <a href="#">FAQ</a></p>
    </div>

そして、CSS

#footer {
    height: 100px;
    opacity: 0.4;
    background-color: #000000;
    background-image: url('footer-bkg.png');}
#footer-main {
    left: 50%;
    margin-left: -567px;
    margin-top: -82px;
    position: absolute;
color: white;}
4

3 に答える 3

1

z-indexをまったく使用せずに、上に別のdiv要素を負のマージンで追加するだけで解決できました

<div id="footer">
</div>
<div id="footer-main">
<img src="uqu-logo.png">
<p>Got question? Check our <a href="#">FAQ</a></p>
</div>

そして、CSS

#footer {
    height: 100px;
    opacity: 0.4;
    background-color: #000000;
    background-image: url('footer-bkg.png');}
#footer-main {
    left: 50%;
    margin-left: -567px;
    margin-top: -82px;
    position: absolute;
color: white;}
于 2013-07-09T21:50:50.167 に答える
0

追加してみてください

#footer { position: relative; z-index: 9999; }
于 2013-07-08T23:39:10.733 に答える
0

この絵は一体どこに向かっているのだろうか？それはどのdivに入りますか？今、私が正しく理解しているのであれば、不透明度を減らした背景の上のレイヤーにあるボックスが必要なだけです。[jsFiddle]技術的にはすでに行っています。

HTMLマークアップもお願いできますか？または、jsFiddle に入力して、問題がどこにあるかを確認します。

また、Z インデックスが機能しない場合は、#footer だけでなく、すべての要素に Z インデックスを割り当てていることを確認してください。

#footer {
    height: 100px;
    opacity: 0.4;
    background-color: #000000;
    z-index: 999;
}
#img_div {
    z-index: 1;
}
于 2013-07-09T00:00:48.967 に答える