jQuery - 背景大小：覆盖+一些百分比

我需要在盘旋时顺利放大背景图像，并防止在div中创建任何空白空间，我使用background-size: cover属性。但this线程表示关键字值不允许动画。所以我将使用jQuery来实现动画。jQuery - 背景大小：覆盖+一些百分比

但我不知道如何设置新的background-size在jQuery上的值。我想多放大10％，background-size: cover+10%当然不会工作。我应该提供什么来实现我想要的？

这是我目前的代码。

<style type="text/css"> 
    #slide_sub {display: table; width: 100%} 
    #slide_sub div.image {height: 300px; width: 50%; display: table-cell; background-size: cover; background-position: center; background-repeat: no-repeat; transition: 0.2s; vertical-align: middle; padding: 24px; box-sizing: border-box; overflow: hidden; position: relative;} 
    #slide_sub div.image:hover {background-size: cover 110%; transition: 0.2s} 

    #slide_sub div.text {width: 100%} 
</style> 

<div class="image" style="background-image: url('a.png')"> 
    <div class="text"> 
     <p class="title">TITLE</p> 
     <p class="subtitle">SUBTITLE</p> 
    </div> 
</div>

在此先感谢您。

来源

2017-04-12 Alfred Woo

你为什么不使用这个[解决方案]（http://stackoverflow.com/questions/27384684/background-transition -with-background-size-cover/27385703＃27385703） –

@AbhishekPandey div中的文本不应该放大 –

一个伪元素将是完美的，所以你可以保留现有的标记。

与transform结合起来，你会得到这个

div.image { 
 
    height: 300px; 
 
    width: 50%; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding: 24px; 
 
    box-sizing: border-box; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
div.image::before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; top: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-image: inherit; 
 
    background-size: cover; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    transition: transform 0.2s; 
 
} 
 

 
div.image:hover::before { 
 
    transform: scale(1.25);  /* 25% increase */ 
 
} 
 
div.text { 
 
    position: relative;   /* so text stay ontop of image */ 
 
}

<div class="image" style="background-image: url(http://lorempixel.com/200/200/nature/1/)"> 
 
    <div class="text"> 
 
    <p class="title">TITLE</p> 
 
    <p class="subtitle">SUBTITLE</p> 
 
    </div> 
 
</div>

来源

2017-04-12 09:57:39 LGSon

你可以试试这个。

.wrap { 
 
    width: 200px; 
 
    height: 200px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    color:#fff; 
 
} 
 

 
.bg_image { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: url("http://placekitten.com/g/500/500"); 
 
    background-size: cover; 
 
    z-index: -1; 
 
    transition: transform .3s; 
 
} 
 

 
.wrap:hover .bg_image { 
 
    transform: scale(1.5) 
 
}

<div class=wrap> 
 
    <div class="bg_image"></div> 
 
    <div class="text"> 
 
    <p class="title">TITLE</p> 
 
    <p class="subtitle">SUBTITLE</p> 
 
    </div> 
 
</div>

来源

2017-04-12 05:45:23

你可以使用mouseenter and mouseleave method这里jQuery只是animate background图片如下，

的mouseenter（） - 火灾分配的造型，当了mouseenter一个元素。 mouseleave（） - 当鼠标移动一个元素时触发指定的样式。

$(document).ready(function(e){ 
 
\t $(".image").on("mouseenter",function(){ 
 
    \t $(this).css({ 
 
    \t "background-size" : "120% 120%", 
 
     "transition" :"background-size 1s ease" 
 
    }); 
 
    }); 
 
    $(".image").on("mouseleave",function(){ 
 
    \t $(this).css({ 
 
    \t "background-size" : "100% 100%", 
 
     "transition" :"background-size 1s ease" 
 
    }); 
 
    }); 
 
});

.image{ 
 
    background:url(" http://placehold.it/350x150") no-repeat; 
 
    background-size:100% 100%; 
 
    overflow:hidden; 
 
    width:100%; 
 
    height:400px; 
 
    border:1px solid #111; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="image"> 
 
    <div class="text"> 
 
     <p class="title">TITLE</p> 
 
     <p class="subtitle">SUBTITLE</p> 
 
    </div> 
 
</div>

来源

2017-04-12 05:50:42 frnt

@Alfred Woo希望这能奏效。 – frnt

我刚才发现'background-size：100％100％'就像'background-size：cover'一样工作。但无论如何感谢您的答案！ –

@AlfredWoo'background-size：100％100％'does ** not **像'background-size：cover'那样工作......调整上面示例的宽度，你会发现它会扭曲图像 – LGSon

$(function(){ 
    $('.image').hover(function(){ 
    $(this).animate({height: '500px', opacity: '0.8'}, "slow"); 
    $(this).animate({width: '500px', opacity: '0.8'}, "slow"); 
    }); 
});

我觉得动画可以这样应用。希望这是你问的。

来源

2017-04-12 06:10:36

jQuery - 背景大小：覆盖+一些百分比

回答

相关问题