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 - 背景大小：覆蓋+一些百分比

回答

相關問題