如何删除 CSS 中透明按钮后面的线

Question

如何去除CSS中透明按钮后面的线？见下图如何删除 CSS 中透明按钮后面的线？见下图如何删除 CSS 中透明按钮后面的线？见下图

.fullscreen {
                height: 100%;
                width: 100%;
                background: no-repeat url("https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg") center / cover;
            }
            .line {
                position: absolute;
                width: 3px;
                height: 100%;
                background-color: rgba(255, 255, 255, 1);
                top: 0;
                left: 50%;
            }
            .btn {
                position: absolute;
                width: 100px;
                height: 100px;
                border: 3px solid #ffffff;
                transform: translate(-50%, -50%);
                top: 50%;
                left: 50%;
                z-index: 1;
            }
            .btn::after {
                content: '';
                display: block;
                width: 60px;
                height: 60px;
                background: #ffffff;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

<div class="fullscreen">
    <span class="line"></span>
    <div class="btn"></div>
  </div>

Answer 1

这更像是一种 hack，可能不适合你，因为你到目前为止还没有提供任何代码。

我的想法是为（在我的例子中）.outer_box 提供与 .background 相同的 background-image 并以相同的方式缩放。

.fullscreen {
  height: 100vh;
  width: 100vw;
  background: no-repeat url("https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg") center / cover;
}

.line {
  position: absolute;
  width: 3px;
  height: 100%;
  background-color: rgba(255, 255, 255, 1);
  top: 0;
  left: 50%;
}

.btn {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 3px solid #ffffff;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 1;
  background: no-repeat url("https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg") center / cover;
  background-size: 100vw;
}

.btn::after {
  content: '';
  display: block;
  width: 60px;
  height: 60px;
  background: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="fullscreen">
    <span class="line"></span>
    <div class="btn"></div>
  </div>

如何删除 CSS 中透明按钮后面的线

How to remove line behind transparent button in CSS

html

css

button

background

transparent