如何使用CSS3正确过渡背景图像？-css教程-PHP中文网

如何使用CSS3正确过渡背景图像？

Susan Sarandon

发布： 2024-12-27 00:01:09

原创

319 人浏览过

How to Properly Transition Background Images with CSS3?

掌握 CSS3 背景图像转换

为了创建引人注目的“淡入淡出”效果，您在尝试时偶然发现了一个意想不到的挑战将 CSS 过渡属性应用到背景图像。让我们深入研究下面的全面解决方案：

代码中提供的 CSS：

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    background: transparent;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

.title a:hover {
    background: transparent;
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

登录后复制

上面的代码演示了值得称赞的尝试，但它未能解释之间微妙但关键的区别背景属性和背景图像属性。要为背景图像设置动画，您必须将过渡应用到“background-image”，而不仅仅是“background”。

这里是更新的代码：

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    background: transparent;
    /* TRANSITION */
    -webkit-transition: background-image 1s;
    -moz-transition: background-image 1s;
    -o-transition: background-image 1s;
    transition: background-image 1s;
}

.title a:hover {
    background: transparent;
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    /* TRANSITION */
    -webkit-transition: background-image 1s;
    -moz-transition: background-image 1s;
    -o-transition: background-image 1s;
    transition: background-image 1s;
}

登录后复制

此调整应该可以使动画平滑您为背景图像寻找的过渡。请记住，在 CSS 过渡中使用背景图像时，请始终指定“background-image”作为过渡属性的目标。

以上是如何使用CSS3正确过渡背景图像？的详细内容。更多信息请关注PHP中文网其他相关文章！