如何设置双封面的“背景大小”？

Question

我想为background-size设置一个双封面，例如：

background-size:cover*200%; // not working
background-size:calc(cover*200%);  // not working
background-size:calc(cover); // not working

有可能做到吗？

我不想使用javascript。非常感谢。

Answer 1

一个主意是要考虑另一个元素，在该元素上应用封面并将该元素放大两倍。例如，您可以使用伪元素。

我一直保持溢出以查看结果：

.box {
  width:150px;
  height:150px;
  border:2px solid;
  margin:100px;
  position:relative;
  /* overflow:hidden;*/
  
}
.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:50%;
  left:50%;
  background:var(--img) center/cover no-repeat;
  width:200%;
  height:200%;
  transform:translate(-50%,-50%);
  
  border:2px solid red;
}

<div class="box" style="--img:url(https://picsum.photos/200/350?image=1069)"></div>

规模相同的想法：

.box {
  width:150px;
  height:150px;
  border:2px solid;
  margin:100px;
  position:relative;
  /* overflow:hidden;*/
  
}
.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  background:var(--img) center/cover no-repeat;
  width:100%;
  height:100%;
  transform:scale(2);
  
  border:2px solid red;
}

<div class="box" style="--img:url(https://picsum.photos/200/350?image=1069)"></div>

Answer 2

您可以尝试一下，也许可以用吗
背景大小：100vw 100vh;