画像の上に透明なボックスのテキストはありますか？

Question

thisのような背景画像の上に透明なボックスを作成する際に問題があります。私のコードはほぼ同じですが、なんらかの理由で透明なボックスを画像の上から移動させることはできません（ボックスを上下のマージンに合わせたいと思います）。パディングを追加：バックグラウンドに20pxは何もしません。マージンを#transboxに20px追加すると、左右のマージンは20pxだけ増加しますが、上下のマージンは何もしません。

HTML & CSS：

.background { 
 
    background-image: url("https://source.unsplash.com/5OMTuqOM7bI"); 
 
} 
 
#transbox { 
 
    background-color: rgba(255, 255, 255, 0.8); 
 
    padding: 20px; 
 
    margin: 60px; 
 
} 
 
h3 { 
 
    text-align: center; 
 
    font-weight: 300; 
 
    color: #3C5FA3; 
 
} 
 
.container { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    padding: 0 30px; 
 
} 
 
.clearfix:after { 
 
    visibility: hidden; 
 
    display: block; 
 
    content: ""; 
 
    clear: both; 
 
    height: 0; 
 
}

<div class="container clearfix background"> 
 
    <div id="transbox"> 
 
    <h3>Some text here</h3> 
 
    </div> 
 
</div>

Answer 1

これを取得するためのいくつかのオプション。そのうちの1つは、コンテナのpadding-top/bottomを設定することです。

padding: 30px; 

（padding: 0 30pxの代わりに）。ここで

あなたのコードに修正です：

.background { 
 
    background-image:url("https://source.unsplash.com/5OMTuqOM7bI"); 
 
} 
 

 
#transbox { 
 
    background-color:rgba(255,255,255,0.8); 
 
    padding:20px; 
 
    margin:60px; 
 
} 
 

 
h3 { 
 
    text-align:center; 
 
    font-weight:300; 
 
    color:#3C5FA3; 
 
} 
 

 
.container { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    padding: 30px; 
 
} 
 

 
.clearfix:after { 
 
    visibility:hidden; 
 
    display:block; 
 
    content:""; 
 
    clear:both; 
 
    height:0; 
 
}

<div class="container clearfix background"> 
 
    <div id="transbox"> 
 
     <h3>Some text here</h3> 
 
    </div> 
 
</div>

Answer 2

あなたはこのような場合のためにclearfixか何かを必要としません。必要なのは背景の不透明度だけです。

• position: relative;
• height: <some>px;

そしてtransbox：

• position: absolute;
• topとright値ここで重要なのは、コンテナを与えることです。

を中心にしたい場合は、です。非常に簡単です。

.background { 
 
    background-image: url("https://source.unsplash.com/5OMTuqOM7bI"); 
 
} 
 
#transbox { 
 
    background-color: rgba(255, 255, 255, 0.8); 
 
    padding: 20px; 
 
    margin: 60px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
h3 { 
 
    text-align: center; 
 
    font-weight: 300; 
 
    color: #3C5FA3; 
 
} 
 
.container { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    padding: 0 30px; 
 
    position: relative; 
 
    height: 500px; 
 
}

<div class="container background"> 
 
    <div id="transbox"> 
 
    <h3>Some text here</h3> 
 
    </div> 
 
</div>

初期バージョンからバージョン

中心

：このような死のトリックを使用します

Answer 3

padding: 0 30px;あなたが言うpadding-top: 0; padding-right: 30px; padding-bottom: 0; padding-left: 30px;

と同じです：.backgroundにpadding: 20px;を追加

は後でCSSにあなたが.containerでこのパディングを上書きするためです何も

もしません。

複数のルールに同じCSSの特殊性がある場合は、最後に発生したルールが優先されます。両方のセレクターが同一の特異性を有するので、.containerの定義は.backgroundの定義より勝つ。