我如何在其中制作内容并使图像响应

2024-04-27 • 问答

我有一个透明的圆圈，是一幅图像。我想将内容放入圈子中。但是，当我更改屏幕大小时，圆圈会更改其大小，或者其中的文本会偏离圆圈。我该如何解决？

我正在使用引导程序4 https://codepen.io/mahirq8/pen/oNNMvwy

.img-1 {
  height: auto;
  max-width: 140%;
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(3deg);
  transform: rotate(30deg);
}

.text-block1 {
  position: absolute;
  bottom: 250px;
  left: 220px;
  color: white;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqq1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row d-flex col-12 justify-content-center">
  <div class="col-lg-3 mx-4 wow fadeInUp" data-wow-delay="500ms" style="right:50px">
    <div class="container">
      <a href="https://ibb.co/Qr5w3wd"><img src="https://i.ibb.co/pJmFBFy/d9c2e11f-5620-48f1-b619-037bd9ab64fd.jpg" alt="d9c2e11f-5620-48f1-b619-037bd9ab64fd" border="0"></a>

      <div class="text-block1">
        <div class="card-body  " style="text-align:center; text-transform:none">
          <h5 class="card-title" style="font-family: Arima Madurai; color:#3d5a98 ; font-size:20px;">
            Intelligently<br>Designed Courses</h5>

          <p class="card-text wow fadeInUp" data-wow-delay="750ms" style="color: black; font-weight: 400; line-height:22px; font-size:19px">
            Our programs and<br>courses are<br>thoughtfully curated to<br>provoke creativity,<br>nurture growth and<br>push boundaries.</p>
        </div>
      </div>
    </div>
  </div>
</div>

这是我的网站，您可以在中间部分看到3个圆圈的实际结果。任何建议将不胜感激。

谢谢

您需要采取一些步骤：

.container应该为position: relative，因此文本相对于文本position: absolute。
要使文本始终与中心对齐，有一些技巧，但我最喜欢的是

{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(50%,50%);
}

使font-size相对于屏幕尺寸。您可以使用media queries

.container {
  position: relative;
}

img {
  max-width: 100%;
}

.img-1 {   
  height: auto;
  max-width: 140%;
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(3deg);
  transform: rotate(30deg);
}

.text-block1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: white;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row d-flex col-12 justify-content-center">
  <div class="col-lg-3 mx-4 wow fadeInUp" data-wow-delay="500ms" style="right:50px">
    <div class="container">
      <a href="https://ibb.co/Qr5w3wd"><img src="https://i.ibb.co/pJmFBFy/d9c2e11f-5620-48f1-b619-037bd9ab64fd.jpg" alt="d9c2e11f-5620-48f1-b619-037bd9ab64fd" border="0"></a>

      <div class="text-block1">
        <div class="card-body  " style="text-align:center; text-transform:none">
          <h5 class="card-title"
              style="font-family: Arima Madurai; color:#3d5a98 ; font-size:20px;">
            Intelligently<br>

            Designed Courses</h5>

          <p class="card-text wow fadeInUp" data-wow-delay="750ms"
             style="color: black; font-weight: 400; line-height:22px; font-size:19px">
            Our programs and<br>
            courses are<br>
            thoughtfully curated to<br>
            provoke creativity,<br>
            nurture growth and<br>
            push boundaries.</p>
        </div>
      </div>
    </div>
  </div>
</div>

https://codepen.io/moshfeu/full/wvvxvaz

我如何在其中制作内容并使图像响应

zcshou 回答：我如何在其中制作内容并使图像响应

大家都在问