Question

在线性渐变背景中，我创建了一个圆圈，并在其中创建了一个小方块。圆形具有淡蓝色，正方形应具有主体的线性渐变，但是问题是div元素的线性渐变的位置与主体背景不匹配。

我尝试使用div元素background:inherit，但是渐变与主体不匹配。

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>

Answer 1

继承人体背景图像的问题是与人体和圆形元素的大小差异。因此，您实际想要实现的是一种打孔器布局元素，它可以暴露一部分人体背景。这是更改HTML的一种方法，其中的circle是circle元素的伪元素。伪元素实际上将使用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>

如何更改div元素的背景颜色以与主体背景颜色匹配？

1 个答案: