css - 包含覆盖文本到图像以供移动 View

Question

我试图让文字包含在图片中。我让它在台式机和平板电脑上完美运行，但我在移动设备上遇到了困难。我让它比以前稍微好一点，但想不出我忽略了什么。

  /* Container holding the image and the text */
   .container {
   position: relative;
   }

  /* Bottom right text */
  .text-block {
    position: absolute;
    display: block;
  bottom: 0;
  right: 0;
  left: 0;
  color: white;
    padding: 0px 40px 0;
    opacity: 0.;
    } 

这是它的外观图片:

平板电脑:

桌面:

<div class="container">
  <img src="uploads/2018/09/App-Design.jpg" alt="App Design">
  <div class="text-block">
    <h6>App Design and Development </h6>
       <p>We design and develop iPhone and Android apps for startups  and   enterprises that are fully compatible with your daily operational activities.</p>
  </div>
</div>

Answer 1

澄清一下，您想让每个部分的文本位于各自的图像内，而不让任何文本位于其图像外？

如果是这样，使用 overflow: hidden; 隐藏所有不适合图像的内容。

如果我误解了你的问题，我很抱歉，你能进一步解释一下吗？

希望这对您有所帮助!