html - 如何在html/css中具有黄色背景的框中创建具有白色感叹号的白色​​边框圆圈？

Question

我正在尝试创建一个白色边框圆圈，在黄色背景框中有一个白色感叹号。黄色背景框的HTML和CSS代码为:

HTML:

<p class="my-paragraph-style">List your dependents and enter their personal information. Pay close attention to information regarding your spouse’s smoking habits.</p>

CSS:

.dependents  .my-paragraph-style
{
    background: #EABB27;
    padding: 20px;
    line-height: 1.4;
    position: relative;
    top: -25px;
}

我从上面的代码(HTML 和 CSS)中得到的黄色背景框的图形表示是:

我的任务是在黄色框内制作一个带有白色感叹号的白色​​边框圆圈。下面是我在黄色背景框中想要的图像:

为了实现这一点，我从黄色背景框的部分裁剪了圆圈。裁剪后，我使用以下 CSS 代码来获取框内的圆圈。

@media screen and (max-width: 767px) and (min-width: 320px)
{
.info-mobile-header-sections 
{ /* Info icon for header parts of sections */
    background: url(img/147811205179656.png) no-repeat;
    margin-top: -3px;
    position: absolute;
    z-index: 200;
    left: 15px;
}
}

147811205179656.png 是裁剪后的图像 从黄色框的部分。

通过使用上面的 CSS 代码，我只能得到黄色框内的圆圈的一部分，而且也没有正确对齐。如果我遵循正确的方法，请告诉我。

Answer 1

这里不需要使用图像，在这里使用像 ::before 这样的伪元素会更容易、更快、更具可扩展性和灵 active :

.my-paragraph-style {
  background: #EABB27;
  padding: 20px 20px 20px 50px;
  line-height: 1.4;
  position: relative;
  font-family: arial, helvetica, sans-serif;
  color: white;
  font-weight: bold;
  font-size: 14px;
  max-width: 300px;
}
.my-paragraph-style::before {
  display: block;
  position: absolute;
  left: 20px;
  top: 23px;
  content: "!";
  border-radius: 50%;
  border: 1px solid yellow;
  width: 20px;
  height: 20px;
  line-height: 22px;
  text-align: center;
  color: yellow;
  font-weight: normal;
}

<p class="my-paragraph-style">List your dependents and enter their personal information. Pay close attention to information regarding your spouse’s smoking habits.</p>