gpt4 book ai didi

html - css3 不能在兼容模式下工作,还有其他选择吗?

转载 作者:行者123 更新时间:2023-11-28 17:30:28 25 4
gpt4 key购买 nike

很简单,我想制作一个动画图 block 类型的按钮。我不确定问题是什么(可能是过时的服务器)但 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>

编辑::根据我的下一篇文章,这实际上是由于兼容模式,这将强制使用该网站的大多数人,所以有人知道是否有解决方法吗?

最佳答案

关于透明度

通过 background: rbga(...) 属性实现的透明度似乎有效 just as expected in Internet Explorer 11根据你的例子:

enter image description here

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

opacity: 0.4;

如果转换是问题...

如果您希望在鼠标悬停在元素外时出现过渡效果,您还需要 transition非悬停选择器上的属性:

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

如下所示:

enter image description here

是否有您期望发生但实际上没有发生的事情?

关于html - css3 不能在兼容模式下工作,还有其他选择吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36598358/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com