时间戳

首页 > 解决方案 > CSS背景层错误

html - CSS背景层错误

问题描述

我正在尝试在现有的“box-list”div 上实现从 codepen 获取的按钮。

但在我的表单中，按钮获得了父亲的背景，我无法按原样执行我原来的按钮蓝色背景。

在页面底部，您可以看到“box-list”之外的按钮的外观。

<link rel="stylesheet" type="text/css" href="style.css"> 
 
 

    <div class="box-list">
        <!-- FREE TEXT BOX -->
        <div class="box" >
            <div class="box__inner">
                <h1>Free Text</h1>
                        Get you free text processed and analyzed, and get opinion summery about.
                        <button class="analyzeBtn mybtn1" >hover</button>
            </div>
        </div>

            <!-- TWITTER BOX -->
            <div class="box" >
                <div class="box__inner">
                    <h1>Twitter Search</h1>
                            Get Twitter post and comments about any subject you choose and analyze the dat
                </div>
            </div>
            <div class="box" >
                <div class="box__inner">
                    <h1>URL</h1>
                        Get your URL article analyzed 
            </div>
        </div>
       
    </div>
    <button class="analyzeBtn mybtn1" >hover</button>


.box-list {
    background: #119bc9;
    overflow: hidden;
    display: flex; 
}

.box {
    min-height: 300px;
    color: #fff;
    transition: all 0.5s;
    max-height: 300px;
    background-image: url('http://lorempixel.com/400/300/sports');
    background-size: cover;
    width: 33.33%;
}

.box__inner {
    padding: 20px;
    min-height: 300px;
    background-color: rgba(17, 155, 201, 0.7);
}

.box:hover {
    width: 150%!important;
    font-size: 18px;
}

.box:nth-child(odd) {
    background-image: url('/images/text.jpg');  
}

.box:nth-child(odd) .box__inner{
    background: rgba(71, 83, 157, 0.8);
}


.analyzeBtn {
    border: 1px solid #3498db;
    background: none;
    padding: 10px 20px;
    font-size: 20px;
    font-family: "montserrat";
    margin: 10px;
    transition: 0.8s;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 5px;
}

.mybtn1 {
    color: #fff;
}
.mybtn1:hover {
    color: #3498db;
    transform: translateY(-7px);
    transition: 0.4s;
}

.analyzeBtn::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 0%;
    background: #3498db;
    z-index: -1;
    transition: 0.6s;
  
}
.mybtn1::before {
    top:0;
    border-radius: 0 0 50% 50%;
    height: 180%;
}

.mybtn1:hover::before {
    height: 0%;
}

JSfiddle 示例

标签： htmlcss

解决方案

您需要添加z-index: 1;到按钮，使其显示在背景之上：

.analyzeBtn {
    border: 1px solid #3498db;
    background: none;
    padding: 10px 20px;
    font-size: 20px;
    font-family: "montserrat";
    margin: 10px;
    transition: 0.8s;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 5px;
    z-index: 1;
}

推荐阅读