过渡属性:背景混合模式忽略过渡持续时间
过渡属性:背景混合模式忽略过渡持续时间
提问于 2021-04-24 20:43:18
将鼠标悬停在this code example的左上角h1元素上
它将在2秒内将h1元素很好地更改为浅蓝色。
它不会在定义的过渡持续时间内更改背景的混合模式。虽然它将应用悬停规则并更改混合模式，但它将忽略过渡持续时间。
如何将过渡持续时间也应用于混合模式？它似乎被忽略了！
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-04-24 21:07:27
嗯，你不能为background-blend-mode设置动画。作为解决办法，您可以使用具有相同背景图像的div，并将background-blend-mode: soft-light, normal;用作默认设置。在悬停时，可以将opacity更改为0，以显示身体的背景图像，该图像默认使用overlay混合模式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<link rel="canonical" href="https://www.humanofearth.com/" />
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<style>
body,
div {
min-height: 100vh;
min-width: 100vw;
color: red;
background-color: black;
background-image: url("https://www.humanofearth.com/img/humanofearth-bkg-no-bkg.png"), url("https://www.humanofearth.com/img/universe-bkg.webp");
background-repeat: no-repeat, no-repeat;
background-attachment: fixed, fixed;
background-size: contain, cover;
background-position: center left, center center;
background-blend-mode: overlay, normal;
transition-property: color;
transition-duration: 2s;
}
body:hover {
color: blue;
}
div {
background-blend-mode: soft-light, normal;
opacity: 1;
transition: opacity 2s;
z-index: -1;
}
div:hover {
opacity: 0;
}
</style>
<title>HumanOfEarth</title>
</head>
<body>
<h1>HumanOfEarth</h1>
<div></div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67242912
复制相关文章
相似问题
腾讯云开发者
