时间戳

首页 > 解决方案 > CSS 响应式图像“完全显示”屏幕上的无拉伸背景和精确的文本放置

css - CSS 响应式图像“完全显示”屏幕上的无拉伸背景和精确的文本放置

问题描述

<div class="container">
  <div class="fullscreen"> 
  
    <div class="textbox">Testing</div>
    
  </div>
</div>

在此处输入图像描述

我正在尝试根据屏幕大小完全显示图像，并在图像的精确指定区域中显示文本（文本框类中的“测试”），如上所示。

试图让上面的代码与这个codepen一起工作，但我承认在摆弄 css 一个小时后，我还差得很远。

令人沮丧的是，css 似乎没有按预期工作，图像似乎不想嵌套到全高等。

标签： css

解决方案

我想建议如果您使用 img HTML 标签添加图像，您可以更好地控制与“测试”文本相关的图像。请检查下面我的片段。您可以通过“.textbox”类的“顶部”位置调整“测试”的位置：

.container{
        min-height: 100%;
        margin: 0;  
        padding: 0;
      }
      .fullscreen{
        width: auto;
        height: 100%;
        margin: 0;
        padding: 0;
        position:relative;
      }

      .textbox{
        position:absolute;
        top:55%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        z-index:3;
        text-align:center;
      }
<div class="container">
  <div class="fullscreen"> 
    <img src="http://print.drawmaticar.com/preview.jpg"   style="width:100%;"/>
  
    <div class="textbox">Testing</div>
    
  </div>
</div>

推荐阅读