在图像中放置固定文本-使用引导程序响应

时间：2019-09-23 04:19:28

标签： css twitter-bootstrap bootstrap-4

我试图在图像中放置文本和按钮，但是我无法使其保持响应状态。

.dados {
    bottom: 10px;
    right: 0;
}

.text {
    font-family: "Arial Bold", Arial;
    font-weight: 700;
    font-size: 22px;
    color: #ffffff !important;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Teste</title>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />

</head>
<body>
<div class="container">
<div class="row mt-4">
      <div class="col-4">
        <div class="position-relative">
          <img src="https://via.placeholder.com/300" alt="">
          <div class="position-absolute dados">
            <h3 class="text-right text">Testes?<br>Teste teste teste teste</h3>
            <button class="btn btn-primary float-right">veja detalhes</button>
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="position-relative">
          <img src="https://via.placeholder.com/300" alt="">
          <div class="position-absolute dados">
            <h3 class="text-right text">Testes?<br>Teste teste teste teste</h3>
            <button class="btn btn-primary float-right">veja detalhes</button>
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="position-relative">
          <img src="https://via.placeholder.com/300" alt="">
          <div class="position-absolute dados">
            <h3 class="text-right text">Testes?<br>Teste teste teste teste</h3>
            <button class="btn btn-primary float-right">veja detalhes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
 </body>
</html>

我试图将父div设置为相对位置，并尝试使用绝对位置来显示信息，但这没有用。

我希望此信息位于图像的右下角。有谁知道该怎么做才能保持响应速度？

3 个答案:

答案 0 :(得分：0)

已添加

img {
  min-height: 300px;
  object-fit: cover;
  width: 100%

}

到img 

.dados {
  bottom: 10px;
  right: 0;
}

.text {
  font-family: "Arial Bold", Arial;
  font-weight: 700;
  font-size: 22px;
  color: #ffffff !important;
}

img {
  min-height: 300px;
  object-fit: cover;
  width: 100%
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <title>Teste</title>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />

</head>

<body>
  <div class="container">
    <div class="row mt-4">
      <div class="col-4">
        <div class="position-relative">
          <img src="https://via.placeholder.com/300" alt="">
          <div class="position-absolute dados">
            <h3 class="text-right text">Testes?<br>Teste teste teste teste</h3>
            <button class="btn btn-primary float-right">veja detalhes</button>
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="position-relative">
          <img class="img-fluid" src="https://via.placeholder.com/300" alt="">
          <div class="position-absolute dados">
            <h3 class="text-right text">Testes?<br>Teste teste teste teste</h3>
            <button class="btn btn-primary float-right">veja detalhes</button>
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="position-relative">
          <img class="img-fluid" src="https://via.placeholder.com/300" alt="">
          <div class="position-absolute dados">
            <h3 class="text-right text">Testes?<br>Teste teste teste teste</h3>
            <button class="btn btn-primary float-right">veja detalhes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

答案 1 :(得分：0)

使相对框填充顶部SELECT DISTINCT A.STUID, A.PROG, A.STU_PROG_ID, A.EVENT_NUMBER, A.EVENT_DATE, A.EVENT_SEQUENCE, A.PROG_STATUS FROM ( SELECT A.STUID, A.PROG, A.STU_PROG_ID, A.EVENT_NUMBER, A.EVENT_DATE, A.EVENT_SEQUENCE, A.PROG_STATUS, MAX(A.EVENT_DATE) OVER( PARTITION BY A.STUID, A.PROG, A.STU_PROG_ID ) AS MAX_EVENT_DATE, MAX(A.EVENT_SEQUENCE) OVER( PARTITION BY A.STUID, A.PROG, A.STU_PROG_ID, A.EVENT_DATE ) AS MAX_EVENT_SEQUENCE, MAX(A.EVENT_NUMBER) OVER( PARTITION BY A.STUID, A.PROG, A.STU_PROG_ID, A.EVENT_DATE, A.EVENT_SEQUENCE ) AS MAX_EVENT_NUMBER FROM TABLE1 A ) A WHERE A.MAX_EVENT_DATE = A.EVENT_DATE AND A.MAX_EVENT_SEQUENCE = A.EVENT_SEQUENCE AND A.MAX_EVENT_NUMBER = A.EVENT_NUMBER; ，并且图像也应位于100%的位置，并按照我应用的方式将css应用于图像，因此，如果现在使用任何尺寸的图像，请设置您可以在没有淀粉或挤压的盒子内成像，并显示图像的中心正方形部分。

请参阅我的代码段以获取解决方案。

absolute
.position-relative img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: 100%;
  object-fit: cover;
}
.position-relative {
  padding-top: 100%;
}
.position-absolute {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 15px;
}

答案 2 :(得分：0)

您可以使用引导卡和图像覆盖。
有关更多参考，请参考https://www.w3schools.com/bootstrap4/bootstrap_cards.asp 和https://getbootstrap.com/docs/4.0/components/card/
尝试在整个页面中查看该响应 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-sm-4">
    <div class="card">
      <img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%">
      <div class="card-img-overlay">
        <h4 class="card-title">John Doe</h4>
        <p class="card-text">Some example text . Some example text some example text. </p>
        <a href="#" class="btn btn-primary">See Profile</a>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card ">
      <img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%">
      <div class="card-img-overlay">
        <h4 class="card-title">John Doe</h4>
        <p class="card-text">Some example text . Some example text some example text. </p>
        <a href="#" class="btn btn-primary">See Profile</a>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card img-fluid">
      <img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%">
      <div class="card-img-overlay">
        <h4 class="card-title">John Doe</h4>
        <p class="card-text">Some example text. Some example text some example text. </p>
        <a href="#" class="btn btn-primary">See Profile</a>
      </div>
    </div>
  </div>

**更新：**：您可以使用flex来实现相同的目的

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.card {
  display: flex;
  flex-direction: column;
}

card-img-overlay {
  margin-bottom: auto;
}
</style>
</head>
<body>
<div class="row">
  <div class="col-sm-4">
    <div class="card">
      <img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%">
      <div class="card-img-overlay card-body d-flex flex-column" style="">
       <div class="mt-auto">
       <h4 class="card-title ">John Doe</h4>
        <p class="card-text">Some example text. Some example text some example text. </p>
        <a href="#" class="btn btn-primary">See Profile</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
   <div class="card">
      <img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%">
      <div class="card-img-overlay card-body d-flex flex-column" style="">
       <div class="mt-auto">
       <h4 class="card-title ">John Doe</h4>
        <p class="card-text">Some example text. Some example text some example text. </p>
        <a href="#" class="btn btn-primary">See Profile</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      <img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%">
      <div class="card-img-overlay card-body d-flex flex-column" style="">
       <div class="mt-auto">
       <h4 class="card-title ">John Doe</h4>
        <p class="card-text">Some example text. Some example text some example text. </p>
        <a href="#" class="btn btn-primary">See Profile</a>
        </div>
      </div>
    </div>
  </div>

全屏查看该按钮，一切都移到底部。
如果您想在顶部放置任何内容，请将其移至<div class="mt-auto">之外。

相关问题
最新问题