Question

我正在尝试使用CSS创建以下效果，但是我在透明背景上遇到了问题。就像背景并没有真正变得透明，仍然覆盖了盒子阴影。

我想要什么：

我所拥有的：

这是我的代码

        .button {
            border-radius: 500px;
            display: inline-block;
            background-color: transparent;
            border: 2px solid black;
            color: white;
            font-family: "Quicksand", sans-serif;
            font-size: 250%;
            letter-spacing: 2px;
            text-align: center;
            padding: 20px 100px;
            font-weight: 900;
            -webkit-box-shadow: 10px 10px 0px 0px rgba(140,122,230,1);
            -moz-box-shadow: 10px 10px 0px 0px rgba(140,122,230,1);
            box-shadow: 10px 10px 0px 0px rgba(140,122,230,1);
            -webkit-text-stroke: 2px black;
        }

Answer 1

您在这里面临的问题是shadow属性。 CSS阴影始终出现在元素后面，并且也不会通过透明背景看到。因此，这里有一个小技巧，您可以使用CSS position属性来实现预期的行为。

.but-container{
    display: flex;
    position: relative;
    width: 300px;
    height: 100px;
}
button{
    z-index:1;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: Transparent;
    background-repeat:no-repeat;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    border-radius: 500px;
    display: inline-block;
    border: 2px solid black;
    color: white;
    font-family: "Quicksand", sans-serif;
    font-size: 250%;
    letter-spacing: 2px;
    text-align: center;
    padding: 20px 100px;
    font-weight: 900;
    -webkit-text-stroke: 2px black;
}
.but-shadow{
    z-index: -1;
    top: 8%;
    left: 3%;
    border-radius: 500px;
    display: inline-block;
    background-color: rgba(140,122,230,1);
    height: 100%;
    width: 100%;
    position: absolute;
}

<div class="but-container">
  <button>GO</button>
  <div class="but-shadow"></div>
</div>

如您在此处看到的，您必须使用一个外部容器，该容器同时包含充当阴影的<button>和<div>。由于这些元素的宽度和高度是相对于父元素的百分比值，因此您可以调整外部<div>容器的大小，希望内部元素将始终与外部{{1} }。因此它也可以用于响应式设计。

透明的背景覆盖框阴影

1 个答案: