Question

我怎么能让这个按钮的innerHTML不隐藏在这些颜色后面。因为现在它就像在幕后一样，如果我改变了按钮的颜色和不透明度，我看不到后面的文字。（用图片更新）

＆＃13;

 body .btn-main {
    position: relative;
    display: block;
    background: transparent;
    width: 200px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 15px;
    text-decoration: none;
    text-transform: uppercase;
    margin: 40px auto;
    cursor: pointer;
    color: black; }
    body .btn-main span {
      z-index: 100; }
    body .btn-main:before, body .btn-main:after {
      width: 200px;
      left: 0px;
      height: 27px;
      z-index: 1; }
    body .btn-main:after {
      position: absolute;
      top: 34px;
      opacity: 0.4;
      background: #5E3553;
      content: '';
      border-top: none;
      -webkit-transform: perspective(15px) rotateX(-5deg);
      -moz-transform: perspective(15px) rotateX(-5deg);
      transform: perspective(15px) rotateX(-5deg); }
    body .btn-main:before {
      position: absolute;
      content: '';
      opacity: 0.6;
      background: #5E3553;
      border-bottom: none;
      -webkit-transform: perspective(15px) rotateX(5deg);
      -moz-transform: perspective(15px) rotateX(5deg);
      transform: perspective(15px) rotateX(5deg); }
    body .btn-main:before, body .btn-main:after {
      z-index: -1;
      border: 2px solid #5E3553; }
  body .main-img {
    background-image: url(https://static.pexels.com/photos/4827/nature-forest-trees-fog.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #464646;
    height: 1000px; }

＆＃13;

<div class="main-img">
  <div class="button btn-main"><span>Trial Now!</span></div>
</div>

＆＃13;

Answer 1

只需将z-index: 1更改为z-index: -1即可。多数民众赞成。

修改将代码段更新为OP的新代码段。现在它包含一个背景。

我为背景提供了z-index: -1，按钮为z-index: 0，文字z-index: 1为position: absolute。

body .btn-main { position: relative; display: block; background: transparent; width: 200px; height: 60px; line-height: 60px; text-align: center; font-size: 15px; text-decoration: none; text-transform: uppercase; margin: 40px auto; cursor: pointer; color: black; } body .btn-main span { left: 30%; position: absolute; z-index: 1; } body .btn-main:before, body .btn-main:after { width: 200px; left: 0px; height: 27px; z-index: 0; } body .btn-main:after { position: absolute; top: 34px; opacity: 0.4; background: #5E3553; content: ''; border-top: none; -webkit-transform: perspective(15px) rotateX(-5deg); -moz-transform: perspective(15px) rotateX(-5deg); transform: perspective(15px) rotateX(-5deg); } body .btn-main:before { position: absolute; content: ''; opacity: 0.6; background: #5E3553; border-bottom: none; -webkit-transform: perspective(15px) rotateX(5deg); -moz-transform: perspective(15px) rotateX(5deg); transform: perspective(15px) rotateX(5deg); } body .btn-main:before, body .btn-main:after { border: 2px solid #5E3553; } body .main-img { background-image: url(https://static.pexels.com/photos/4827/nature-forest-trees-fog.jpeg); background-position: center center; background-repeat: no-repeat; background-size: cover; background-color: #464646; height: 1000px; }

<div class="main-img"> <div class="button btn-main"><span>Trial Now!</span> </div> </div>

Answer 2

我们可以使用以下样式在其中添加内部跨度：

.btn-main span {position: absolute; width:100%; left:50%; margin-left:-50%; z-index:2;}

演示如下面的片段：

body{background:black}

body .btn-main {
    position: relative;
    display: block;
    background: transparent;
    width: 200px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 15px;
    text-decoration: none;
    text-transform: uppercase;
    margin: 40px auto;
    cursor: pointer;
    color: white; }

.btn-main span {position: absolute; width:100%; left:50%; margin-left:-50%; z-index:2;}

    body .btn-main:before, body .btn-main:after {
      width: 200px;
      left: 0px;
      height: 27px;
      z-index: 1; }

    body .btn-main:after {
      position: absolute;
      top: 34px;
      opacity: 0.4;
      background: #5E3553;
      content: '';
      border-top: none;
      -webkit-transform: perspective(15px) rotateX(-5deg);
      -moz-transform: perspective(15px) rotateX(-5deg);
      transform: perspective(15px) rotateX(-5deg); }

    body .btn-main:before {
      position: absolute;
      content: '';
      opacity: 0.6;
      background: #5E3553;
      border-bottom: none;
      -webkit-transform: perspective(15px) rotateX(5deg);
      -moz-transform: perspective(15px) rotateX(5deg);
      transform: perspective(15px) rotateX(5deg); }

    body .btn-main:before, body .btn-main:after {
      border: 2px solid #5E3553; }

<div class="button btn-main"><span>test</span></div>

Answer 3

可能需要按钮的css属性 - background：rgba（0,0,0,0.2）; RGBA可以为背景颜色设置不透明度

水平六角形按钮css

3 个答案: