CSS/HTML 环绕图像的文本不起作用

Question

问题：我无法让文本环绕我创建的图像。如果我叫错了或者把花车放在了错误的地方，请告诉我？

我尝试过的：我尝试使用此网站作为参考 - https://www.homeandlearn.co.uk/WD/wds4p6.html

但是，我仍然无法弄清楚我的代码有什么问题？我看着浮动，并想如果我把浮动：左让我们说在图像 css 属性中它应该制作那个边框。我也试过让它周围的图像形状像一个圆圈？那往往也不起作用？

我猜主要问题是我没有把它放在正确的地方或需要修复一些东西。

另外 - 这个 HTML 文档有更多的东西和更多的 css。

如果您想了解更多，这里是我的网站！ https://constantinelinardakis.github.io/OfficialWebsite/Home.html

.outline {
    position: absolute;
    height: 90%;
    top: 30%;
    left: 6%;
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.9) inset;
    background: url("../assets/backg.png") no-repeat center;
    background-color: #3156a0;
    border-radius: 25px;
    transition: all 0.7s;
    -webkit-transition: color 0.3s;
    transition: all 0.7s;
}

/* OUTLINE IMAGE ICON */
.costaicon {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 350px;
    height: 350px;
    max-width: 500px;
    max-height: 500px;
    transition: all 0.7s;
    float: left;
    border-radius: 50%;
    shape-outside: url(https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/OTHERLOGO%20TRANSPARENT.png);
    shape-margin: 15px;
    shape-image-threshold: 0.5;
    mask-image: url(https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/OTHERLOGO%20TRANSPARENT.png);
    margin: 10px;
}

/* OUTLINE PARAGRAPHS */
.outline > p {
    display: block;
    float: left;
    /* 
    position: absolute;
    top:10%;
    left:35%;
    */
    font-size: 20px;
    color: white;
    font-family: "Abel", sans-serif;
    transition: all 0.7s;
    margin: 10px;
}

<div class="outline">
    <!-- MY ICON -->
    <div class="costaicon">
        <img alt="MyLogo" src="https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/OTHERLOGO%20TRANSPARENT.png" style="width: 350px; height: 350px; float: left;" />
    </div>

    <p>
        Hello my name is Constantine Linardakis as known as TwinPlayz on Youtube. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I
        blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I
        blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal.
    </p>

    <!-- STYLE -->
    <p style="color: transparent;"></p>
</div>

Answer 1

你能检查一下下面的代码吗？希望它对你有用。我们从.costaicon 中删除了position、shape-outside 和mask-image，还从.outline > p 中删除了float。

请参考此链接：https://jsfiddle.net/yudizsolutions/vrguhok7/

.outline {
  position: absolute;
  height: 90%;
  top: 30%;
  left: 6%;
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.9) inset;
  background: url("../assets/backg.png") no-repeat center;
  background-color: #3156a0;
  border-radius: 25px;
  transition: all 0.7s;
  -webkit-transition: color 0.3s;
  transition: all 0.7s;
}


/* OUTLINE IMAGE ICON */

.costaicon {
  float: left;
  border-radius: 50%;
  margin: 10px;
}


/* OUTLINE PARAGRAPHS */

.outline>p {
  display: block;
  font-size: 20px;
  color: white;
  font-family: 'Abel', sans-serif;
  transition: all 0.7s;
  margin: 10px;
}

<div class="outline">

  <!-- MY ICON -->
  <div class="costaicon">

    <img alt="MyLogo" src="https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/OTHERLOGO%20TRANSPARENT.png" style="width:350px;height:350px;float:left;">

  </div>

  <p>
    Hello my name is Constantine Linardakis as known as TwinPlayz on Youtube. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I
    blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal.
    I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal.
  </p>

  <!-- STYLE -->
  <p style="color: transparent;"></p>

</div>