Question

我不知道这是怎么发生的？为什么会发生这种情况......但是我从头开始重新构建一个界面，因为旧界面很糟糕且不可靠。

无论如何，我有div作为＆＃34;按钮。＆＃34;我已经分配给它们的渐变背景不起作用，然后我偶然发现了一个有趣的行为......如果我将位置属性设置为绝对，而不是相对，则显示背景。

以下是我的例子： 1）Absolute positioning 2）Relative positioning

有问题的部分（css明智）在这里：

.banner > .button {
position: relative;
top: 10;
display: inline-block;
height: 85%;
min-width: 80px;
margin-top: auto;
margin-bottom: auto;
text-align: center;
vertical-align: middle;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
}
.banner > .button > span {
    left: 30%;
}
.blueGlass {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3b679e+0,2b88d9+50,207cca+51,7db9e8+100&0.48+0,0.58+100 */
    background: -moz-linear-gradient(top,  rgba(59,103,158,0.48) 0%, rgba(43,136,217,0.53) 50%, rgba(32,124,202,0.53) 51%, rgba(125,185,232,0.58) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(59,103,158,0.48) 0%,rgba(43,136,217,0.53) 50%,rgba(32,124,202,0.53) 51%,rgba(125,185,232,0.58) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(59,103,158,0.48) 0%,rgba(43,136,217,0.53) 50%,rgba(32,124,202,0.53) 51%,rgba(125,185,232,0.58) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a3b679e', endColorstr='#947db9e8',GradientType=0 ); /* IE6-9 */
    color: white;
}
.blueGlass:hover {
    -webkit-box-shadow: inset 0px 0px 26px 12px rgba(255,255,255,0.15);
    -moz-box-shadow: inset 0px 0px 26px 12px rgba(255,255,255,0.15);
    box-shadow: inset 0px 0px 26px 12px rgba(255,255,255,0.15);
    cursor: pointer;
}

有关为何会发生这种情况的任何想法，更重要的是我如何解决这个问题？

谢谢！

Answer 1

以下类position: absolute;的{{1}}隐藏了灰色div后面的颜色，将其更改为以下代码，它正常工作here

.verticalCenter

Answer 2

第一个问题是，

.banner {
    ...
    min-height: 40px;
}

只需将其更改为，

.banner {
    ...
    height: 40px;
}

因为如果对子元素使用百分比height值。您必须为父包装器提供修复高度。否则它将无法正常工作。

请参阅示例：https://jsfiddle.net/23qp2j8b/4/

接下来的问题是，

删除跨度中的verticalCenter。并将这些样式添加到button > span，

.banner > .button > span {
    ...
    padding: 6px 15px;
    display: block;
}

完整修复示例：https://jsfiddle.net/23qp2j8b/5/

希望这是你需要的！ ;）

背景 - 颜色不适用于相对对象，但将适用于绝对定位

2 个答案: