与背景图象和文本的敏感网横幅

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;
  ...
}

使用.caption处理vw中的字体大小。

实施例

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

<强>提示

这种方法的优点是您不必处理背景图像 的东西。

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;
        }
    }