使背景圖片縮放，而不是在鉻工作

Question

我的「放大效應」使用這樣一個div工作：

<div class="highlight" style="background-image:url(image); background-position: 65% 50%;"> 
      <div class="content" style="margin-top: 150px"> 
       <h3>Blabla<br>Blablablablabla<br></h3> 
       <p class="home5050">Blablablablabla.</p> 
       <a class="btn btn-photo" href="urlsomething" style="color: black; background-color: white;">Blabla <span class="btnArrow">&gt;<span></span></span></a> 
      </div> 
     </div> 

和CSS這樣的：

.highlight { 
    display: block; 
    position: relative; 
    /*min-height: 800px;*/ 
    min-height: 520px; 
    background-position: center center; 
    background-repeat: no-repeat; 
    /*padding-top: 200px;*/ 
    padding-top: 80px; 
    /*background-size: cover;*/ 
} 

.highlight:before { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,.25); 
    content: ""; 
} 

.highlight{ 
    position: relative; 
    height: 800px; 
    cursor: pointer; 
    background-size: auto 110%; 
    background-position: center center; 
    -moz-transition: background-size 3s ease; 
    -webkit-transition: background-size 3s ease; 
    transition: background-size 3s ease; 
} 
.highlight:hover{ 
    background-size: auto 130%; 
    background-color:rgba(0,0,0,0.4); 
    -moz-transition: background-size 3s ease; 
    -webkit-transition: background-size 3s ease; 
    transition: background-size 3s ease; 
} 

.highlight:before{ 
    content: ' '; 
    position: absolute; 
    left: 0; top: 0; 
    right: 0; bottom: 0; 
    background-color:rgba(0,0,0,0.4); 
    -moz-transition: background-color 3s ease; 
    -webkit-transition: background-color 3s ease; 
    transition: background-color 3s ease; 
} 

.highlight:hover:before{ 
background-color:rgba(0,0,0,0.8); 
-moz-transition: background-color 3s ease; 
-webkit-transition: background-color 3s ease; 
transition: background-color 3s ease; 
} 

我發現更多的CSS在主題中，使參考突出顯示，也許有一些問題呢？這在Firefox中工作，但現在不在Chrome中。

https://jsfiddle.net/1v3epk6b/2/

Answer 1

你在3個名額指定background-size但其中只有2具有過渡。結合您的規則.highlight並刪除第三個background-size。

我不知道哪些規則你其實想，但也許是這樣的：

.highlight:hover { 
    background-size: auto 130%; 
    background-color: rgba(0,0,0,0.4); 
    -moz-transition: background-size 3s ease; 
    -webkit-transition: background-size 3s ease; 
    transition: background-size 3s ease; 
} 
.highlight { 
    display: block; 
    position: relative; 
    min-height: 520px; 
    height: 800px; 
    cursor: pointer; 
    background-size: auto 110%; 
    background-repeat: no-repeat; 
    background-position: center center; 
    padding-top: 80px; 
    -moz-transition: background-size 3s ease; 
    -webkit-transition: background-size 3s ease; 
    transition: background-size 3s ease; 
} 

https://jsfiddle.net/xav8t479/2/

---

如果你想在3秒後轉變爲開始，你需要使用transition-delay財產：

.highlight:hover { 
    transition-delay: 3s; 
    /* ... */ 
} 

https://jsfiddle.net/xav8t479/3/

Answer 2

這是沒有動畫關鍵幀的版本：
您是否在尋找這個？它在Chrome中工作。

.highlight:hover { 
 
    background-color: rgba(0,0,0,0.4); 
 
    -webkit-transition: all 0.2s ease; 
 
    -moz-transition: all 0.2 ease; 
 
    -o-transition: all 0.2s ease; 
 
    transition: all 0.2s ease; 
 
    background-size: auto 130%; 
 
} 
 
.highlight { 
 
    -webkit-transition: all 0.2s ease; 
 
    -moz-transition: all 0.2 ease; 
 
    -o-transition: all 0.2s ease; 
 
    transition: all 0.2s ease; 
 
    background-image:url(http://www.eahealthsolutions.com/wp-content/uploads/2016/05/EA_Health_On_Call_Compensation_8916.jpg); 
 
    position: relative; 
 
    height: 800px; 
 
    cursor: pointer; 
 
    background-size: auto 110%; 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    display: block; 
 
    min-height: 520px; 
 
    padding-top: 80px; 
 
}

<div class="highlight"> 
 
    <div class="content" style="margin-top: 150px"> 
 
    <h3>Blabla<br>Blablablablabla<br></h3> 
 
    <p class="home5050">Blablablablabla.</p> 
 
    <a class="btn btn-photo" href="urlsomething" style="color: black; background-color: white;">Blabla <span class="btnArrow">&gt;<span></span></span></a> 
 
    </div> 
 
</div>