带有背景图像和文本的自适应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;
        }
    }