0

不透明度設定で背景画像を表示したかったので、このコードを使用しました

マークアップ:

<div class="container">
    <div class="BackLayer">
         <section id="galleria">
             <div class="title-box">
                 <h1 id="galleria-title">Galleria a Arte Studio Invernizzi</h1>
             </div>
         </section>
    ...

CSS:

#galleria:before {
   content : "";
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   background: url('images/00-Tremlett-Verjux-2013.jpg') no-repeat;
   width: 587px;
   height: 400px;
   opacity : 0.2;
}

それは正常に動作しますが、画像を background-size: cover として設定する必要があります... ( http://wrapbootstrap.com/preview/WB048M27Gと同様のことをしたい)

単純に background-size: cover を追加すると、 width プロパティがそれを上書きします (または、私は推測します...とにかく、機能しません)。幅/高さを設定しないと、画像が表示されません...

この問題は私に大きな頭痛の種を与えています... 何か提案はありますか?

4

1 に答える 1

0

で絶対位置を変更してみてください:

position: absolute;
top: 0;
left: 0;

bottom: 0; /* add this */
right: 0; /* add this */

代わりに幅/高さを使用

于 2013-10-20T13:38:24.170 に答える