水平六角形按钮css

我怎么能使这个按钮的innerHTML不隐藏在那些颜色后面。因为现在它就像幕后，如果我改变按钮的颜色和透明度我看不到后面的文本。（带图像更新）水平六角形按钮css

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; }

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

来源

2017-01-30 ddeadlink

只要改变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>

来源

2017-01-30 09:32:05

真的很有用，但它会工作，如果它将是背景图像？ – ddeadlink

对不起？请更具体一些。 –

救了我一天。我最好的问候和谢谢你 – ddeadlink

，我们可以在它里面添加一个内部跨度以下样式：

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

来源

2017-01-30 10:00:11

你测试过吗？我认为这实际上是你想要的 –

可能是你需要css属性的button - background：rgba（0，0，0，0.2）; RGBA可以设置背景颜色的不透明度

来源

2017-01-30 10:06:08 grinmax

水平六角形按钮css

回答

相关问题