背景颜色和背景图像 CSS3 之间的过渡

Posted 2023-05-08

【中文标题】背景颜色和背景图像 CSS3 之间的过渡

【英文标题】：transition between background color and background image CSS3

【发布时间】：2014-07-22 08:20:28

【问题描述】：

我有一组 div，我希望它们中的每一个都具有不同的背景颜色，并且在悬停时转换为所选 url 的背景图像。到目前为止，我已经设法找到平滑颜色的代码 -> 图像转换，但这需要 html 中的实际 img 代码，我需要这些 div，因为我将在其中放入文本。

是否有机会通过 CSS 实现从背景颜色到背景 url 的 0.5 秒或更短的平滑过渡？

如果您查看http://loopedmag.com，您可以看到我想在代码中重新创建的内容，但使用过渡动画颜色->图像。

【问题讨论】：

你看过css3吗transition

【参考方案1】：

您无法使用 CSS3 转换将 background 属性从纯色动画化为图像。

要实现所需的行为，您需要使用纯色背景色淡入/淡出图层。您可以使用伪元素来最小化该层的标记。

DEMO

HTML：

<div class="one"></div>
<div class="two"></div>

CSS：

body,html
    height:100%;


div
    height:50%;
    width:50%;
    position:relative;
    background-size:cover;

.one
    background: url(http://lorempixel.com/output/fashion-q-c-640-480-3.jpg);

.two
    background: url(http://lorempixel.com/output/people-q-g-640-480-7.jpg);

div:after
    content:'';
    position:absolute;
    left:0; top:0;
    width:100%;
    height:100%;
    background:gold;
    opacity:1;

    -webkit-transition: opacity .5s;
    transition: opacity .5s;

div:hover:after
    opacity:0;

【讨论】：

+1。这。过渡不适用于背景图像：w3.org/TR/css3-transitions/#animatable-properties.

嗨，谢谢，只要我不必将文本放入实际 div 中，因为它只会在悬停后显示。

@enpe23：您可以在content 上使用::after 伪元素上的attr() 属性值。不要将文本放在 div 中。将您的文本作为该 div 上的属性（最好是 data- 属性）的值。 演示：jsfiddle.net/abhitalks/Fg78p/8

@abhitalks 很棒，看起来像我的解决方案，谢谢

【参考方案2】：

这应该可以帮助您入门 = FIDDLE。

你也可以使用JS，但这不是必需的。

CSS

.changeme 
    margin: 10px auto;
    width: 200px;
    height: 200px;
    background-color: red;
    text-align: center;
    line-height: 200px;
    color: blue;
    font-size: 30px;

.changeme:hover 
    background-color: transparent;
    background: url('http://i.imgur.com/DgYUsKY.jpg?1');

.changeme2 
    margin: 10px auto;
    width: 200px;
    height: 200px;
    background-color: blue;
    text-align: center;
    line-height: 200px;
    color: white;
    font-size: 30px;

.changeme2:hover 
    background-color: transparent;
    background: url('http://i.imgur.com/BF7aTQR.jpg');

【讨论】：

使用这种技术不可能在背景颜色和图像之间实现平滑过渡。

我为 OP 提供了一个起点。 OP 可以接受 abhitalk 的建议并学习转换，或者用户可以学习一些关于 JS 和 jQuery 的知识。我完全复制了 OP 提供的页面的行为。

+1 但不使用内部 div，您可以使用 :after 元素