时间戳

首页 > 解决方案 > 如何在CSS中删除透明按钮后面的线

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

问题描述

如何在 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>

标签： htmlcssbuttonbackgroundtransparent

解决方案

这更像是一种 hack，可能对您不起作用，因为到目前为止您还没有提供任何代码。

我的想法是给（在我的情况下）.outer_box与 the 相同background-image的.background值并以相同的方式对其进行缩放。 

.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>

推荐阅读