帶有背景圖像和文本的自適應Web橫幅

Question

我正在嘗試制作一個響應式橫幅。 我有一個背景圖像，可以在您調整屏幕時調整大小，還有一個包含文本的透明div元素。

第1期

問題是我的透明div元素無法正確調整大小

我試圖通過使用height:100%將透明div元素調整到圖像的頂部和底部，但這沒有用，這在頂部留有空隙。 （下面的圖片顯示了我在說什么）

第2期

另外，我的透明div元素內的文本應在左上角進行調整。 我將文本移到了左側，但沒有在透明div元素中居中。

 .banner { background: url(https://i.imgur.com/abF4sj3.jpg); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; width: 100%; height: 423px; display: inline-block; position: relative; margin-top: 0px; } .caption { position: absolute; top: 13%; left: 0%; text-align: left; color: white; font-weight: bold; height: 100%; width: 150px; } .transbox { padding: 50%; max-width: 100%; border-radius: 6px; width: 100%; height: 100%; background-color: #ffffff; opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */ } .transbox span { font-family: "Times New Roman", Times, serif; font-weight: bold; color: #000000; } .trans-text-top { margin-left: -55px; margin-top: 26px; font-size: 200%; } .trans-text-bottom { margin-left: -55px; margin-top: -20px; font-size: 220%; } .linebreak { padding-bottom: 30px; } upper-linebreak {} @media screen and (max-width: 700px) { .transbox { display: none; } } 

 <div class="banner"> <div class="caption"> <div class="transbox"> <span class="trans-text-top">Tree</span> <div class="linebreak"></div> <span class="trans-text-bottom">Pathway</span> </div> </div> </div> 

Answer 1

不同的方法

HTML結構

<div class="banner">
  <img src="">
  <div class="caption">
    <h1>...</h1>
    <h2>...</h2>
  </div>
</div>

的CSS

.banner {
  position: relative;
  ...
}

.caption {
  position: absolute;
  top: 0;
  ...
}

使用vw處理.caption字體大小。

例

 .banner { position: relative; } .banner img { /* Make image responsive */ display: block; width: 100%; max-height: auto: } .banner>.caption { position: absolute; top: 0; width: 25%; height: 100%; background: white; opacity: 0.6; } .banner>.caption>h1, .banner>.caption>h2 { text-align: center; } .banner>.caption>h1 { font-size: 5vw } .banner>.caption>h2 { font-size: 4vw; } 

 <div class="banner"> <img src="https://i.imgur.com/abF4sj3.jpg" alt=""> <div class="caption"> <h1>Tree</h1> <h2>Path</h2> </div> </div> 

暗示

這種方法的好處是，你不必應付背景圖像 的東西 。

Answer 2

我在您的.transbox類上放置了確切的高度，因為它是在父容器中定義的。

.transbox {
padding:50%;
max-width: 100%;
border-radius: 6px; 
width:100%;
height:423px;    
background-color: #ffffff;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */

}

我將左右邊距設置為自動。 這使您的文本居中。 希望能幫助到你。

.trans-text-top{
margin-left:auto;
margin-right:auto;
margin-top:26px;
font-size: 200%;
}

.trans-text-bottom{
 margin-left:auto;
 margin-right:auto;
 margin-top:-20px;
 font-size: 220%;  
 }

Answer 3

試試這個。希望這對您有用。

HTML代碼

<div class="banner">
    <div class="captionTransbox">
            <h1 id="captionTop">Tree</h1>
            <h2 id="captionBottom">Pathway</h2>
    </div>
</div>

CSS代碼

    .banner {
        background: url(https://i.imgur.com/abF4sj3.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        width: 100%;
        height: 423px;
        position:relative;
    }

    .captionTransbox{

        height: 423px;
        width: 300px;        
        background-color: #ffffff;
        opacity: 0.6;
        filter: alpha(opacity=60);
        /* For IE8 and earlier */
    }



    #captionTop {
        font-family: "Times New Roman", Times, serif;
        font-weight: bold;
        color: #000000;              
        padding: 50% 20% 0% 5%;
    }
    #captionBottom {
        font-family: "Times New Roman", Times, serif;
        font-weight: bold;
        color: #000000;            
        padding: 0% 20% 20% 5%;
    }

    @media screen and (max-width: 700px) {
        .captionTransbox {
            display: none;
        }
    }