如何使用 css 为 div 中的文本创建可缩放背景

Question

我想创建一个如下所示的 div。

而 html 是

<div class="col-lg-3 col-md-3 col-sm-3">
  <div style="background-color: rgb(236, 236, 236); border-radius: 100px; width: 80%; height:80%; padding: 50px">
    <h2 style="width: 100%; height: 100%" />Text</h2>
  </div>
</div>

这在 100% 页面视图中工作正常，但如果我放大或缩小页面，'text' div's 形状的背景会发生变化。你能帮我解决这个问题吗？基本上我想要 div.

的可缩放背景

Answer 1

使用伪元素...

body {
  text-align: center;
}

:root {
  --val: 200%;
}

h2 {
  display: inline-block;
  margin-top: 50px; /* adjust as required - or align some other way*/
  position: relative;
}

h2::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--val);
  padding-bottom: var(--val);
  transform: translate(-50%, -50%);
  background: lightgrey;
  z-index: -1;
  border-radius: 50%;
}

<h2>Text</h2>

如何使用 css 为 div 中的文本创建可缩放背景

How to create a scallable background for text which is in div using css

css

scalability