Question

我在Safari 12.1（14607.1.40.1.4）中将背景颜色转换为透明时遇到问题。

该代码不会将背景转换为透明。而是将鼠标悬停时闪烁或不执行任何操作。

这些过渡在Chrome和Firefox中似乎可以正常运行。

div为空
或位置：固定的已删除
或将目标背景色设置为一种颜色（rgba透明度不起作用）

<!DOCTYPE html>
<html>
    <head>
        <style>
        body{
            background-color:white;
        }
        .box{
            width:200px;
            height:100px;
            background-color:lightblue;
            transition:1s all;
            position:fixed;
        }
        .box:hover{
            background-color:transparent;
        }
        </style>
    </head>
    <body>
        <div class="box">test</div>
    </body>
</html>

我希望能够将固定的divs背景色转换为透明色。有办法使它起作用吗？

Answer 1

我刚刚遇到了相同的Safari错误，对此感到非常沮丧...

似乎position: fixed和background: transparent在Safari上无法很好地协同工作。

我最终在“固定” div中添加了一个div，并将其用于背景颜色过渡。

修复后，Safari背景颜色会转换为透明。虫子？

1 个答案: