为什么转换在我的情况下不起作用

编程问答 2022-08-26

问题描述

我想知道为什么我的转换在 wordpress 中不起作用，而在 Codepen 中却可以正常工作。悬停在项目上会改变背景，但它也应该与 transition

有关

我在试图找出这只是我的愚蠢错误还是 wordpress 中的其他东西可能会阻止它时，我已经精疲力竭了。

Here is my codepen

：Codepen

Here is the website I'm applying it to: Wordpress page

解决方法

改变从背景到背景图像的过渡

background-image 350ms cubic-bezier(0.77,0.175,1)

.container #picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #f5bf30;
    transition: background-image 350ms cubic-bezier(0.77,1);
}

来源：http://css3.bradshawenterprises.com/cfimg/

编辑 1：

使用 1x1px 图像的初始背景

.container #picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8ut/gPwAHegLlBdE8JgAAAABJRU5ErkJggg==);
    transition: background-image 350ms cubic-bezier(0.77,1);
}

本例中使用的图像是用 png-pixel

生成的

编辑 2：

我查看了您对我建议的更改的实施，

您想将 transition: background 1350ms cubic-bezier(0.77,1) !important; 替换为 transition: background-image 350ms cubic-bezier(0.77,1); 以进行初始设置 .container #picture

当我测试它时，它就像那样完美。

并删除您添加到 .container #picture.one、.container #picture.two、...等的规则

enter image description here

编辑 3：

显示颜色到图像和图像到图像过渡之间差异的并排示例；

.square {
  width:150px;
  height:150px;
  transition: background-image 350ms cubic-bezier(0.77,1);
  float: left;
  margin-right:50px;
}
.example-1 {
  background: #f5bf30;
}

.example-2 {
 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8ut/gPwAHegLlBdE8JgAAAABJRU5ErkJggg==);
}
.example-1:hover,.example-2:hover{
 background-image:url(https://via.placeholder.com/150);
}
<div class="square example-1"></div>
<div class="square example-2"></div>

backgroundcss-transitionshoverwordpress