Question

背景

我需要为我的网站提供一些图像基本文本。我首先使用rgb和rgba函数给出一个透明的黑盒子。然后通过将图像声明为“relative”而将文本声明为“绝对”来将文本放在上面。

问题

当我调整浏览器大小时，文本向下用完图像。它显示在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;
}

需要

我需要在调整大小到最小金额后保留图片，即如果通过手机访问网站。

Answer 1

如果你没有在图像上放置最小尺寸，那么最终文本无论如何都不合适。但有一点我建议将padding-top: 80px;从80px的常数值更改为padding-top: 25%;的百分比。这将有助于随着图像尺寸的变化而更好地扩展。

Answer 2

您可以将内容克隆到英雄下方的另一个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>

Answer 3

这将起作用:(用这些替换你的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;
  }

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

3 个答案: