Question

图像显示了我正在尝试做的事情。我尝试过各种各样的方法，但似乎没有任何运气。我也试图使其响应，但是当我使屏幕变小时，盒子开始相互重叠。 https://imgur.com/ALX9qTD

我使用的另一种方法是使每个方框都成为一个图像并添加文本，但是当屏幕调整大小时我遇到了类似的问题。 https://imgur.com/Ma3V27B

<div class="container-bg">
        <div class="container">
          <div class="products">
            <h1>PRODUCTS</h1>
            <div class="row">
              <div class="col-md-3">
                <div class="box">
                  <img src="img/red.png" class="img-responsive">
                  <p class="bottom">PPE</p>
                </div>
              </div>

                <div class="col-md-3">
                <div class="box">
                  <img src="img/green.png" class="img-responsive">
                  <p class="bottom">FOOTWEAR</p>
                </div>
              </div>

                <div class="col-md-3">
                <div class="box">
                  <img src="img/blue.png" class="img-responsive">
                  <p class="bottom">CLOTHING</p>
                </div>
              </div>

                <div class="col-md-3">
                <div class="box">
                  <img src="img/black.png" class="img-responsive">
                  <p class="bottom">RAIL TOOLS</p>
                </div>
              </div>
           </div>
         </div>
       </div>
     </div>
   </div>


    .box{
    position: relative;
    overflow: hidden;
    color: #fff;
    border-radius: ;
    display: inline-grid;
    text-align: center;
    padding: 5px;
    }

    .box img{
     width: 250px;
    height:200px;
    }

    .bottom,
    .right{
     margin:5em;
     position:absolute;
      }

      .bottom{
        bottom: 0px;
        }

      .right{
       right: 0px;
       top: 0px;
       }

Answer 1

根据你对img-responsive类的使用，我假设你正在使用Bootstrap 3.x，尽管这个解决方案适用于4.x而且改动最少（主要是改变imp-responsive } img-fluid并删除xs后缀。

依靠position:absolute，你走在正确的轨道上。这是将文字定位在<img>上方而不会将图片换成background的唯一方法。

.box {
  position: relative;
  margin-bottom: 3rem;
}
  
.box p,
.box h2 {
  position: absolute;
  z-index: 2;
  margin: 0;
  color: #fff;
  text-transform: uppercase;
}

.box h2 {
  padding: 2vmax;
  font-size: 2vmax;
}

.box p {
  bottom: 0;
  background: RGBA(0,0,0,0.85);
  padding: .5vmax 1vmax;
  font-size: 1vmax;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-3">
      <div class="box">
        <h2>Name One</h2>
        <p>Test One</p>
        <img src="https://placehold.it/450/fc4349/ff8084/&text=Image" class="img-responsive" />
      </div>
    </div>

    <div class="col-xs-6 col-sm-3">
      <div class="box">
        <h2>Name One</h2>
        <p>Test Two</p>
        <img src="https://placehold.it/450/8dc041/a6d85b/&text=Image" class="img-responsive" />
      </div>
    </div>

    <div class="col-xs-6 col-sm-3">
      <div class="box">
        <h2>Name One</h2>
        <p>Test Three</p>
        <img src="https://placehold.it/450/3598d8/5fb3ea/&text=Image" class="img-responsive" />
      </div>
    </div>

    <div class="col-xs-6 col-sm-3">
      <div class="box">
        <h2>Name One</h2>
        <p>Test Four</p>
        <img src="https://placehold.it/450/292c33/4a4f5b/&text=Image" class="img-responsive" />
      </div>
    </div>
  </div>  
</div>

注意：您可以在Bootply上看到相同的代码（默认情况下它会显得更大）：https://www.bootply.com/49AuIAv7Bn

您需要考虑的主要是响应行为。对于我的例子，我依靠一个快速而肮脏的vmax单元，尽管你可以利用@media断点更好地控制/一致性来改变字体和填充单元。

如果您要探索该路线，我强烈建议您使用Bootstrap 3.x使用的媒体断点：https://getbootstrap.com/docs/3.3/css/#grid-media-queries

使用引导程序时向文本添加文本

1 个答案: