主页 / 问题 / 1236060
Accepted
VostokSisters
Asked:2022-01-26 05:07:54 +0000 UTC2022-01-26 05:07:54 +0000 UTC

使用溢出和边界半径修剪块，但保持内容固定

  • 772

我们需要通过溢出和边界半径来裁剪延伸到窗口全高的块。

下面是一个例子。

动画也会随着填充和半径的变化而变化。

问题是我没有设法让图像保持固定。播放动画时，图片也会移动，因为它会沿着布局移动。

实际上，我寻求帮助，我该如何解决这个问题？

代码笔

body {
  margin: 0px;
  padding: 0px;
}

.test {
  box-sizing: border-box;
  overflow: hidden;
  height: 100vh;
  transition: padding 300ms ease;
  padding: 0px;
  border-radius: 0px;
}

.test:hover {
  padding: 30px;
}

.test:hover .img-wrapper {
  border-radius: 20px;
}

.img-wrapper {
  height: 100%;
  width: 100%;
  transition: border-radius 300ms ease;
  overflow: hidden;
}

.img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url("https://placeimg.com/1000/1000/arch");
  background-size: cover;
}
<div class="test">
  <div class="img-wrapper">
    <div class="img"></div>
  </div>
</div>

css3

1 个回答

  1. Best Answer

    我希望我已经达到了预期的效果。background-clip属性将帮助您：

    body { margin: 0; /* Only for demo --> */ height: 100vh; background-color: rgba(255, 255, 255, 1); background-image: url('https://isstatic.askoverflow.dev/m9NKc.png'), radial-gradient(#fff8, #000f); background-position: 0% 0%; background-repeat: no-repeat; background-size: auto; }

.test { height: 100vh; }

.img-wrapper {
  height: 100%;
  width: 100%;
}

.img {
  width: 100%;
  height: 100%;
  padding: 0px;
  border-radius: 0px;
  box-sizing: border-box;
  background-image: url("https://placeimg.com/1000/1000/arch");
  background-size: cover;
  background-position: center;
  background-clip: content-box;
  transition: padding .3s ease, border-radius .3s ease;
}
.test:hover .img {
  border-radius: 50px;
  padding: 30px;
}
    <div class="test">
  <div class="img-wrapper">
    <div class="img"></div>
  </div>
</div>

    • 1

相关问题