2

我有一些共享某些 CSS 的元素。现在我想要一个元素在它上面有一个覆盖 div，里面有一些文本。可以在这里看到一个例子。目前它有点“猜测”，但你可以看到浏览器之间的差异，所以我怀疑让像素完全正确会改变任何事情。

目前，我的方法是插入<div>具有相同属性的 a ，但它有很多重复的代码，并不完美。

这是HTML：

<!-- regular non-locked element -->
<a href='#' class='level yellow'>
    <h1>Level 1</h1>
    <div class='score'>score</div>
    <h2>248</h2>
    <input type='text' value='20' class='dial' />
</a>

<!-- locked element -->
<div class='level yellow'>
    <h1>Level 1</h1>
    <div class='score'>score</div>
    <h2>0</h2>
    <input type='text' value='0' class='dial' />
    <div class='locked'><br /><br /><br />You still need to unlock this level!</div>
</div>

CSS：

.level {
    border-radius: 20px;
    -webkit-border-radius:20px;
    -moz-border-radius: 20px;
    width:150px;
    height:220px;
    padding:10px;
    border-width: 1px;
    border-style: solid;
    background-color:transparant;
    color:#8C9695;
    margin:15px auto 0px auto;
    cursor:pointer;
    position:relative;
    display:block;
    text-decoration:none;
    transition: background-color 0.3s, color 0.3s;
    -webkit-transition: background-color 0.3s, color 0.3s;
    text-align:center;
}
.level:hover:not(> .locked){
    color: white;
}
.locked {
    background-color:rgb(0, 0, 0);
    background-color:rgba(0, 0, 0, 0.8);
    width:172px;
    height:242px;
    position:relative;
    top:-135px;
    left:-10px;
    border-radius:15px;
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    z-index:20;
    cursor:default;
    transition:0.3s;
    color:transparent;
    text-align:center;
}
.locked:hover{
    color:white;
}
4

2 回答 2

4

position:relative您可以通过将基础元素和覆盖元素作为其子元素并将position:absolute和top、right、属性全部设置为bottom，从而将元素精确地放置在彼此之上。例如：left0

.level {
    position:relative;
}

.locked {
    position:absolute;
    top:0;right:0;bottom:0;left:0;
    background-color:rgb(0, 0, 0);
    background-color:rgba(0, 0, 0, 0.8);
    border-radius:15px;
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    z-index:20;
    cursor:default;
    transition:0.3s;
    color:transparent;
    text-align:center;
}
于 2013-08-01T11:39:50.030 回答
0

好吧，您只需要一个元素 - 只需隐藏/取消隐藏锁定的 div，或将普通元素的类更改为锁定类，或将一个元素淡入另一个元素或....

简而言之，有很多方法可以做到这一点。

于 2013-06-27T21:49:58.327 回答