如何在.card内定位重复径向渐变？定位后渐变消失问题解决

我在支持HTML/CSS自定义的网站上搭建个人主页，想要让重复径向渐变的中心定位在.card内的圆形图片后方，形成环绕图片的圆环效果。但只要给渐变添加任意定位（比如at top），渐变就完全消失了。我试过把CSS直接写进HTML里，排查是不是card的ID影响，但结果还是一样。奇怪的是，把相同代码放到jsfiddle里加定位却能正常显示。

无定位的渐变代码（正常显示） #

background: repeating-radial-gradient(circle,#000, #000 20px, #fff 20px, #fff 40px)

添加定位后的代码（渐变消失） #

background: repeating-radial-gradient(circle at top,#000, #000 20px, #fff 20px, #fff 40px)

完整代码片段 #

CSS #

#card1 {
  padding-left: 20px;
  padding-right: inherit;
}

#card1 .card {
  border: none;
  background: repeating-radial-gradient(circle, #000, #000 20px, #fff 20px, #fff 40px)
}

HTML #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container-fluid d-block card border-0 px-0 py-5" style="margin-top: -58px; background-color: transparent">
  <div class="container text-center px-0" style="letter-spacing: .25px; font-size: 10pt;">
    <div class="row">
      <div class="col-md-4 order-md-2 mb-md-0 mb-3" id="card1">
        <div class="card d-block modal-open h-100">
          <div class="card-header" style="background-color:black">
            <h1 class="text-center text-uppercase mb-0" style="font-weight:300; letter-spacing:1px;">
              Name</h1>
          </div>
          <div class="card-block">
            <img class="image mb-3" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/47592316_Upv.png" style="background-size:contain;background-position:center;background-repeat:no-repeat;width:150px;border-radius:100%;aspect-ratio:1;">
            </img><br>

            <p style="margin:0px 0px 10px;word-wrap:break-word;">
              <p style="font-family:Grandstander">
                testteste tdis udfufjifjieof jiosjf ijsdpojoisdp jsopd jodisdjos gjiofdsjgosdfgjio djfewiaof fewjfiwoefqwieofjoi fejiwfjweifje fewjfiewjfowe
              </p>

              <hr class="my-2 faded">

              <div class="justify-content-between">
                <span class="text-uppercase text-muted" style="font-weight: 300; letter-spacing: .5px;">
                  Gender</span>
                <span>Content</span>
              </div>
              <hr class="my-2 faded">

              <div class="justify-content-between">
                <span class="text-uppercase text-muted" style="font-weight: 300; letter-spacing: .5px;">
                  Age</span>
                <span>Content</span>
              </div>
              <hr class="my-2 faded">

              <div class="justify-content-between">
                <span class="text-uppercase text-muted" style="font-weight: 300; letter-spacing: .5px;">
                  Role</span>
                <span>(what they do)</span>
              </div>
              <hr class="my-2 faded">

              <div class="justify-content-between">
                <span class="text-uppercase text-muted" style="font-weight: 300; letter-spacing: .5px;">HTML</span>
                <span>@Pinky</span>
              </div>
              <hr class="my-2 faded">

              <div class="row no-gutters align-items-center">
                <div class="col-auto text-uppercase text-muted" style="font-weight: 300; letter-spacing: .5px;">Theme
                </div>
                <div class="col px-2"></div>
                <div class="col-auto text-primary">
                  Song Name <i class="fas fa-play fa-fw"></i>
                  <iframe src="https://www.youtube.com/embed/ID_HERE?modestbranding=1" style="position:absolute; top: 0; bottom:0; left:0; right:0; opacity: .001" class="h-100 w-100" frameborder="0"></iframe>
                </div>
              </div>

这个问题大概率是因为你使用的网站对CSS属性做了过滤或解析限制，导致带定位参数的repeating-radial-gradient被识别为无效样式而忽略。可以尝试以下几种替代方案：

1. 用background-position替代渐变定位
   保留无定位的径向渐变，通过background-position调整渐变位置，效果和at定位一致：

#card1 .card {
  border: none;
  background: repeating-radial-gradient(circle, #000, #000 20px, #fff 20px, #fff 40px);
  background-position: center top; /* 对应circle at top的效果 */
  background-repeat: repeat;
}

2. 伪元素模拟环绕圆环
   如果渐变定位始终无法生效，给图片容器添加伪元素，直接在图片后方生成环绕效果：

.card-block {
  position: relative;
}
.card-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 150px; /* 和图片宽度一致 */
  height: 150px; /* 和图片高度一致 */
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #000, #000 20px, #fff 20px, #fff 40px);
  z-index: -1; /* 放到图片下方 */
}

注意要移除.card原有的渐变背景，避免样式冲突。

3. 使用图片替代渐变
   把需要的环绕圆环效果导出为PNG图片，作为背景图使用，绕过网站的CSS解析限制：

#card1 .card {
  border: none;
  background: url('你的圆环图片路径') no-repeat center top;
  background-size: cover;
}

内容的提问来源于stack exchange，提问作者jelliedbro