提问人：jelliedbro 提问时间：11/15/2023 最后编辑：isherwoodjelliedbro 更新时间：11/17/2023 访问量：46
如何在卡片中定位重复的径向渐变？
How to position a repeating radial gradient within a card?
问：
我在一个网站上有一个个人资料，允许您在设置中输入 HTMl 和 CSS 来自定义您的页面。我的目标是让重复径向渐变的中心从.card中的圆形图片后面开始，这样环就会在它周围形成。
我的问题是，当我添加任何类型的定位（如“在顶部”）时，渐变会完全消失。
我尝试将 CSS 直接放在 HTML 中，看看它是否是卡的 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)
结果：
#card1 {
padding-left: 20px;
padding-right: inherit;
}
#card1 .card {
border: none;
background: repeating-radial-gradient(circle, #000, #000 20px, #fff 20px, #fff 40px)<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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">
<!--------- SIDE STATS -------------------------------------------------------->
<div class="card d-block modal-open h-100">
<div class="card-header" style="background-color:black">
<!-------------- CHARACTER NAME ----------------------------------------->
<h1 class="text-center text-uppercase mb-0" style="font-weight:300; letter-spacing:1px;">
Name</h1>
</div>
<div class="card-block">
<!---------------- FOCAL IMAGE -- WILL SCALE ACROSS SCREEN SIZES ---------->
<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>
<!-- CODING CREDIT -- LEAVE THIS -------------->
<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>
<!--- INSTRUCTIONS: fill in the "ID_HERE" with a youtube video id, --------->
<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>答： 暂无答案
评论