Question

我正试图淡出一种颜色（该部分工作正常），但也可以在悬停时平滑地放大背景图像。

Wordpress正在输出内联背景图片：

<a href="<?php echo the_permalink(); ?>" class="product-module" style="background-image:url(<?php echo the_field('thumbnail_image'); ?>);"  data-equalizer-watch>
    <span class="product-overlay">
        <h2>
            <?php echo get_the_title($post->post_parent); ?><br />
            <?php echo the_title(); ?>
        </h2>                   
    </span>
</a>

这是我的css：

.product-module {
    background-repeat: no-repeat;
    background-size:cover;
    background-position: center;    
    width:100%;
    min-height:288px;
    display:block;
    position: relative;
    transition:all 0.5s ease-out;
    -webkit-transition:all 0.5s ease-out;
    -o-transition:all 0.5s ease-out;
    -moz-transition:all 0.5s ease-out;      
}

.product-module:hover {
    background-size:120%;   
}

.product-module:hover h2 {
    color:$orange;
}

.product-module h2 {
    color:white;
    font-size:2.375rem;
    font-weight:$medium;
    text-align: center;
    height: 100%;
    margin-bottom: 0px;
    justify-content: center;
    display: flex;
    align-items: center;
    padding:10px;    
}

.product-overlay {
    height:100%;
    width:100%;
    background-color:rgba(0,127,161,0.8);
    display:block;
    -webkit-transition: background .5s ease-out;
    -moz-transition: background .5s ease-out;
    -o-transition: background .5s ease-out;
    transition: background .5s ease-out;    
}

.product-overlay:hover {
    background-color:rgba(0,127,161,0); 
}

目前颜色渐渐变细但背景图像缩放到位而不是顺利发生，我该怎么改变呢？

Answer 1

问题可能是由以下原因造成的：

background-size:cover;

您应该将初始background-size更改为：

background-size: 100%;

淡出颜色，缩放背景图像

1 个答案: