Question

我尝试使用codepen.io中的代码进行后台切换。但是在将代码添加到我的CSS文件中之后，图像和文本的颜色正在切换，并且背景根本不会改变。

我放置了body元素的代码。

如何修复我的网站，以便仅显示背景颜色切换？

<html>


<head>


  <link rel='stylesheet' id='child-theme-css' href='http://vocaloid.de/wp-content/themes/Vuturize/style.css?ver=2.1.2' type='text/css' media='all' />


</head>

<body class="home blog logged-in header-full-width full-width-content" itemscope="itemscope" itemtype="http://schema.org/WebPage">
  <div class="site-container">

    <div class="site-inner">
      <div class="one-half start postpreview">
        <img width="750" height="256" src="http://vocaloid.de/wp-content/uploads/2015/02/KAITO-6th-anniversary-2015-Project-DIVA-Arcade-Diamond-Dust-750x256.jpg" class="attachment-Beitragsbild wp-post-image" alt="KAITO 6th anniversary 2015 Project DIVA Arcade Diamond Dust"
        />
        <h2 class="entry-title" itemprop="headline"><a href="http://vocaloid.de/news/test/" rel="bookmark">TEST</a></h2> 

      </div>
      <div class="soc fb"><a href="http://vocaloid.de/out/facebook" target="_blank">Facebook</a>
      </div>
      <div class="soc tw"><a href="http://vocaloid.de/out/twitter" target="_blank">Twitter</a>
      </div>
</div></div>

</body>

</html>

Answer 1

问题在于，为了为背景设置动画，您可以为filter属性设置动画。但该属性会影响所有内容，而不仅影响背景，因此文本颜色也会发生变化。

相反，您可以为background-image制作动画。但是存在一个问题：规范将background-image定义为不可动画的。但是，webkit支持它。

Answer 2

如果您发布了CSS也会有所帮助，但我会继续尝试回答这个问题。

一种选择是确保您只定位background-color内的@keyframes hue，如下所示：

@keyframes hue {
    /*hue will animate from 0 to 360. Saturation and Lightness remain constant*/
    20% {background-color: hsl(72, 100%, 50%);}
    40% {background-color: hsl(144, 100%, 50%);}
    60% {background-color: hsl(216, 100%, 50%);}
    80% {background-color: hsl(288, 100%, 50%);}
    100% {background-color: hsl(360, 100%, 50%);}
}

查看此示例here

如果您严格使用this codepen.io中的代码，那么诀窍就是在您的背景动画之后设置文本/图像的样式：

a {
  color: #ffff !important;
}

img {
  background: none !important;
}

不建议这样做，因为使用!important被视为临时修复而不是良好的CSS练习。

Answer 3

可能会发生这种情况，因为您可能正在更改color而不是background-color。

CSS：更改背景会使图像和文本更改其颜色

3 个答案: