如何更改div元素的背景颜色以与主体背景颜色匹配？
在线性渐变背景中，我创建了一个圆圈，并在其中创建了一个小方块。圆具有淡蓝色，正方形应具有主体的线性渐变，但是问题是div元素的线性渐变的位置与主体背景不匹配。
我尝试background:inherit使用div元素，但渐变与主体不匹配。
body {
background: linear-gradient(45deg, yellow, green);
background-size: 400% 400%;
}
.circle {
height: 150px;
width: 150px;
border-radius: 50%;
position: relative;
margin: auto;
background: dodgerblue;
}
.square {
height: 50px;
width: 50px;
transform: translate(250px, -100px);
background: inherit;
}<body>
<div class="circle"></div>
<div class="square"></div>
</body>
继承主体背景图像的问题是主体和圆形元素的尺寸差异。所以你真正想要实现的是一种打孔类型的布局元素，它暴露了身体背景的一部分。这是一种修改 HTML 的方法，其中圆是圆元素的伪元素。伪元素实际上会给圆圈着色box-shadow，并使透明正方形可见。
body {
background: linear-gradient(45deg, yellow, green);
background-size: 400% 400%;
}
.circle-with-square {
height: 150px;
width: 150px;
border-radius: 50%;
margin: auto;
position: fixed;
align-items: center;
overflow: hidden;
display: flex;
flex-flow: column nowrap;
justify-content: center;
}
.circle-with-square::after
{
content: "";
height: 50px;
width: 50px;
display: block;
box-shadow: 0 0 0 150px dodgerblue;
}<body>
<div class="circle-with-square"></div>
</body>