Question

很简单，我想制作一个动画平铺类型按钮。我不确定是什么问题（可能是过时的服务器）但css3属性不起作用。（我正在使用ie11所以我知道它们应该在我的浏览器上工作）。

下面是我的代码，什么不起作用是RGBA或转换（我相信是CSS3属性，如果我错了请纠正我）

对于解决方法的任何帮助都会非常感激，我尝试使用modernizr，但它只是完全让我感到满意。

    <!DOCTYPE html>
<html>
<head>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="CSS/StyleSheet.css">
    <style>
.tile{
    height: 190px;
    width: 190px;
    overflow: hidden;
    background-repeat: no-repeat;
    max-width: 100%;
    text-align: center;
    vertical-align: middle;
    background-size:190px 190px;
}

.caption{
    background-color: rgba(0,0,0,0.4);
    overflow: hidden;
    color: #fff;
    font-weight: bold;
    margin: 150px 0px 0px 0px;
    height: 190px;
    width: 190px;
}
.caption:hover {
    transition: margin .5s;
    margin: 0px 0px 20px 0px;
    background-color: rgba(0,0,0,0.4);
    cursor: pointer;
}

#description{
    overflow: hidden;
    margin: 25px 0px 0px 0px;
}
    </style>
</head>
<body>
    <h1>Welcome</h1>
    <div class="tile" style="background:url('images/tile1.jpg'); background-size:190px 190px" >
      <div class="caption" onclick="alert('test');" >
            <p>Some caption</p>
            <p id="description">Some lengthy description that may potentially overflow into two lines</p>
       </div>`enter code here`
    </div>
</body>
</html>

编辑:: 根据我的帖子，这实际上是由于兼容模式，这将强制使用该网站的大多数人，所以有谁知道如果一个解决方法？

Answer 1

关于透明度

根据您的示例，background: rbga(...)属性的透明度似乎正常just as expected in Internet Explorer 11：

另一种选择是使用CSS opacity属性，其功能类似于您的用例，但它只处理透明度级别。它的功能有点不同，但它应用于目标元素和元素的所有子元素，因此它始终不是最合适的选择。

opacity: 0.4;

如果过渡是问题......

如果您希望在将鼠标悬停在元素之外时显示转换，那么您还需要非悬停选择器上的transition属性：

.caption{
   /* Other properties omitted for brevity */
   transition: margin .5s;
}

可以在下面说明：

你有什么期望发生的事情不是吗？

css3无法在兼容模式下工作，还有其他选择吗？

1 个答案: