Question

我想为加载操作创建一个css类。我有div面板，包含ajax请求操作。我将在面板上叠加加载模糊。但没有工作。这是my working code

文字和按钮没有出现在装载下。我的透明度是0.4

.main{
    height:     250px;
    width:      300px;
    border: solid 1px red;
    overflow: hidden;
    float:left;
    margin-right:10px;
}
.medium{
    height:     250px;
    width:      100px;
    border: solid 1px blue;
    overflow: hidden;
}
.loading {  
    position:relative;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 205, 205, 205, 0.4 ) 
                url('http://www.easyshopindia.com/images/loading.gif') 
                50% 50% 
                no-repeat;
}
body .loading{
    display:block;
    overflow:hidden;
}

<div class="main">
    <div class="loading">
    </div>
    <button>show images</button>
    <p>This is my paragraph.</p>
</div>

<div class="medium">
    <div class="loading">
    </div>
    <button>show info</button>
    <p>hello this is small box</p>
</div>

Answer 1

我认为您希望将加载设置为叠加，因为您必须将父元素设置为position: relative并给予子加载元素position: absolute以填充父元素。

.main{
height:     250px;
width:      300px;
border: solid 1px red;
overflow: hidden;
float:left;
margin-right:10px;
position: relative;
}
.medium{
    height:     250px;
    width:      100px;
    border: solid 1px blue;
    overflow: hidden;
    position: relative;
}
.loading {  
    position: absolute;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 205, 205, 205, 0.4 ) 
                url('http://www.easyshopindia.com/images/loading.gif') 
                50% 50% 
                no-repeat;
}

请参阅此更新的jsfiddle： - http://jsfiddle.net/pvvo7kre/7/

通过div标签创建透明加载叠加层

1 个答案: