css背景大小封面

Question

喜。 這聽起來很簡單，但如果你處理動態內容則不然。 我有一個容器，背景圖像覆蓋容器。 在懸停時，背景大小應該大2％（或者反過來。實際上並不重要）有沒有辦法實現這一目標？

.container
   background-size: 102% !important //here it should be cover + 2%
   background-position: center
   +transition(all 0.3s ease-in-out)
.container:hover
   background-size: 100% !important //here it should be cover 

Answer 1

我擔心你無法通過計算或任何類型的操作來操縱封面屬性來實現102％的操作。 我看到它的方式你有兩個選擇。 一種是使用JavaScript並模仿封面的行為，另一種是將圖像設置為此容器內的偽元素。 像這樣的東西。

.container {
   position: relative;
   overflow: hidden;
   width: ###;
   height: ###;
}

.container:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background: url('bg.png') cover center;
}

.container:hover:before {
  transform: scale(1.02);
}

使用容器的內容進行斗爭可能有點麻煩，但是最容易做到的就是在其中創建另一個絕對定位的.content div，它只是跨越整個區域。

Answer 2

而不是使它大2％，你可以改為將它設定為一個尺寸。 設置大小會更容易，然后你就可以完全按照自己的意願制作它。

例如

background-size: 120px 100px;
background-position: center;

等等