Question

我有两个盒子，较小的盒子需要与父盒子的父盒子大小相同，但是问题是盒子处于绝对位置，所以有一个障碍是它阻止我将子盒子做成和父母一样大。我正在尝试镜像具有相同图像的两个盒子。这些图像之一将变得模糊，但是图像必须彼此相同。 jsFiddle

body {
  margin: 0;
}

#banner {
  height: 100vh;
  background-image: url(https://images.wallpaperscraft.com/image/glare_rainbow_circles_background_20329_1440x900.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  width: 200px;
  height: 100px;
}

.box:before {
  background-image: url(https://images.wallpaperscraft.com/image/glare_rainbow_circles_background_20329_1440x900.jpg);
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  background-size: cover;
}

jsFiddle

Answer 1

我认为您正在寻找遮罩

body {
  margin: 0;
}

#banner {
  height: 100vh;
  background-image: url(https://images.wallpaperscraft.com/image/glare_rainbow_circles_background_20329_1440x900.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}


#banner:before {
  content:"";
  background:inherit;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  filter:grayscale(80%);
  -webkit-mask:linear-gradient(#fff,#fff) center/200px 100px no-repeat;
          mask:linear-gradient(#fff,#fff) center/200px 100px no-repeat;
}

或<div id="banner"> </div>

background-attachment:fixed;

body {
  margin: 0;
}

#banner {
  height: 100vh;
  background-image: url(https://images.wallpaperscraft.com/image/glare_rainbow_circles_background_20329_1440x900.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment:fixed;
}

.box {
  position: absolute;
  left: 0;
  right:0;
  bottom:0;
  top:0;
  margin:auto;
  background-color: white;
  width: 200px;
  height: 100px;
}

.box:before {
  background-image: url(https://images.wallpaperscraft.com/image/glare_rainbow_circles_background_20329_1440x900.jpg);
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  background-size: cover;
  background-position: center center;
  background-attachment:fixed;
  filter:grayscale(80%);
}

放置与父盒镜像大小相同的绝对子盒

1 个答案: