如何在html/css中为标题标签创建背景？

yptwkmov 于 2023-09-28 发布在其他

关注(0)|答案(2)|浏览(157)

。
尝试创建一个标题标签的背景，如上图所示。有人知道怎么做吗？
尝试使用剪辑路径和svg路径，但没有得到它的权利。如果有人能解释一下就好了。谢谢你，谢谢

/* First try*/
.splash {
  background-color: #f5e2d1;
  clip-path: ellipse(75% 23% at 53% 30%);
  padding: 10px;
}

/* Second try, didn't quite understand this one and tried playing with the numbers but didn't get the shape i want */
.splash {
  background-color: #f5e2d1;
  clip-path: path('M50 0 C20 20, 20 70, 50 50, 80 70, 80 20, 50 0 Z');
  padding: 10px;
}

<div class="splash">
  <h3 lass="clipped">Education</h3>
</div>

Html

来源：https://stackoverflow.com/questions/77154877/how-do-i-create-a-background-for-a-heading-tag-in-html-css-like-this

2条答案

按热度按时间

nmpmafwu1#

这能满足你的需要吗

.fancy-text {
  background: linear-gradient(45deg, #ff9800, #e91e63);
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 2px;
  border-radius: 40%;
  width: 15%;
  height: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="fancy-text">
  Raky
</div>

你可以玩这个

width: 15%;
  height: 10px;
  display: flex;

来塑造你更喜欢的形状

赞(0）回复(0）举报 2023-09-28

jhkqcmku2#

@CheepSheep，看看你尝试了什么，这里有更多的东西给你...

const splash = document.querySelector('.splash');
const fancyText = document.querySelector('.fancy-text');

function resizeSplash() {
  const textWidth = fancyText.offsetWidth;
  splash.style.width = textWidth + 'px';
}

resizeSplash();
window.addEventListener('resize', resizeSplash);

.splash {
  position: relative;
  display: inline-block;
  background-color: #f5e2d1;
  text-align: center;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  padding: 10px;
}

.clipped {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 10px;
}

.fancy-text {
  background: linear-gradient(45deg, #ff9800, #e91e63);
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 2px;
  border-radius: 40px;
  display: inline-block;
}

<div class="splash">
  <h3 class="clipped">
    <p class="fancy-text">Raky's Education </p>
  </h3>
</div>

<div class="splash">
  <h3 class="clipped fancy-text">Raky's Education</h3>
</div>
<br><br>
<div class="splash">
  <h3 class="clipped">
    <p class="fancy-text">Raky's Education </p>
  </h3>
</div>
<br> <br>
<div class="splash">
  <h3 class="clipped fancy-text">Raky's Education</h3>
</div>

赞(0）回复(0）举报 2023-09-28

我来回答

如何在html/css中为标题标签创建背景？

2条答案

相关问题

热门标签

最新问答