调整浏览器大小时，图像上方的文本不起作用

Text over image does not work when browser resized

本文关键字：文本 不起作用 图像 浏览器 小时 调整      更新时间：2023-09-26

背景

我需要一些基本的文字图片为我的网站。我首先使用rgb和rgba函数给出了一个透明的黑盒。然后通过将图像声明为"相对"，将文本声明为"绝对"来放置文本。

问题

当我调整浏览器的大小时，文本会向下超出图像。如所示https://jsfiddle.net/Lheg26kw/这是html-

<div class="hero-container">
<div class="hero-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Old-Style_Balinese_Cat.png" width=100% height=80%>
<div class="hero-text">
    <p>This is text<br>
    <span>this is some more text for trial of this problem</span></p>
</div>
</div>
</div>

这里是CSS：

.hero-image{
position: relative;
width: 100%;
}
.hero-text p{ 
 position: absolute;
 text-align: center;
 bottom: 0px;
 top: 0px;
 width: 100%;
 background: rgb(0, 0, 0); /* fallback color */
 background: rgba(0, 0, 0, 0.4);
 padding-top: 80px;
 color: white;
  font-weight: bolder;
 }
.hero-text span{
font-weight: normal;
}

需要

我需要文本在调整到最小数量后保持在图像上，即如果网站是通过手机访问的。

您可以将内容克隆到英雄下方的另一个div，然后隐藏。hero-text

$(window).on('resize', function() {
  var $mobileContent = $('.mobile-content');
  var $bodyWidth = $('body').width();
  if ($bodyWidth < 620) {
    var $innerHero = $('.hero-text').html();
    $mobileContent.html($innerHero);
  } else {
    $mobileContent.empty();
  }
}).trigger('resize');
body {margin: 0;}
.hero-image {
  position: relative;
  width: 100%;
}
.hero-text p {
  position: absolute;
  text-align: center;
  bottom: 0px;
  top: 0px;
  width: 100%;
  background: rgb(0, 0, 0);
  /* fallback color */
  background: rgba(0, 0, 0, 0.4);
  padding-top: 80px;
  color: white;
  font-weight: bolder;
}
.hero-text span {
  font-weight: normal;
}
.mobile-content {
  color: #000;
  font-weight: 700;
  text-align: center;
}
@media(max-width: 620px) {
  .hero-text {
    display: none;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="hero-container">
  <div class="hero-image">
    <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Old-Style_Balinese_Cat.png" width=100% height=80%>
    <div class="hero-text">
      <p>This is text
        <br>
        <span>this is some more text for trial of this problem</span>
      </p>
    </div>
  </div>
</div>
<div class="mobile-content"></div>

如果不在图像上设置最小大小，那么无论怎样，最终文本都不适合。但我建议您将padding-top: 80px;从恒定值80px更改为类似padding-top: 25%;的百分比。这将有助于随着图像大小的变化而更好地缩放。

这将起作用：（用这些替换你的css）

  .hero-image{
    position: relative;
    width: 100%;    
  }
  .hero-image img{
    width:100%;
    display:block;
  }
  .hero-text{
    width:100%;
    height:100%;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.4); 
    position: absolute;
    top:0;
    left:0;
  }
  .hero-text p{ 
    position: absolute;
    text-align: center;
    top: 50%;
    transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    width:100%;
    padding: 5px 0;
    margin:0;
    color: white;
    font-weight: bolder;
  }
  .hero-text span{
    font-weight: normal;
  }
相关文章：