交叉悬停效果 - 第二个背景没有响应答案

【问题标题】：Crossover hover effect - second background isn't responsive交叉悬停效果 - 第二个背景没有响应
【发布时间】：2017-08-04 08:28:18
【问题描述】：

我正在使用带有 2 个背景的交叉淡入淡出，第二个背景没有响应。

HTML：

<div class="bord2 crossfd2">
<img src="original image">
</img>
</div>

CSS：

.bord2 {
        padding: 0;
        margin: 0;
        -webkit-box-sizing: border-box;
}

.crossfd2 {
        background: url("transition-image");
        display: inline-block;
        font:size: 0;
  **** the extra code goes here ****
}

.crossfd2 img{
                 -webkit-transition: opacity 1s ease-in-out;
                 -moz-transition: opacity 1s ease-in-out;
                 -o-transition: opacity 1s ease-in-out;
                 transition: opacity 1s ease-in-out;
}

.crossfd2 img:hover {
                    opacity: 0;
}

谢谢！

亚当

要解决此问题，请添加以下 CSS：

对于背景图片：

.class_with_img {
    background-image:url('img_name.png');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
}

【问题讨论】：

你想要 0.5 秒而不是 1 秒……你认为这将是一个“减速”？
如果这是整个 css，那么导致问题的不是 css
我的意思是更快 - 谢谢。知道问题是什么，我该如何解决？背景图像没有响应，这对我来说听起来像是一个 CSS 问题。背景：url（“过渡图像”）；是什么没有正确响应。

标签： javascript css wordpress hover lightbox

【解决方案1】：

让图片在 CSS 中响应

img {
    height: auto;
    max-width: 100%;
}

对于背景图片：

.class_with_img {
    background-image:url('img_name.png');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
}

【讨论】：