css背景大小封面

黑。這聽起來很簡單，但如果你處理動態內容則不是。我有一個包含容器的背景圖像的容器。懸停後，背景大小應該增大2％（或者其他方式並不重要）有沒有辦法實現這個目標？css背景大小封面

.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

來源

2016-02-05 suMi

目前尚不清楚你想要什麼，可以創建在**片段演示**或[的jsfiddle（http://www.jsfiddle.net）？ – divy3993

以** JavaScript **或** Backend **（如：PHP ....）生成的動態方式？ – divy3993

是背景大小：102％102％;不工作懸停..？（它會延伸到背景覆蓋） – d3vdpro

恐怕你不能用calc或其他任何類型的操作來實現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裏面，這只是橫跨整個區域的最簡單的事情。

來源

2016-02-05 07:55:00 GMchris

以及一個**內容：「」; **在**之前**的樣式，以便您可以看到圖像 – bulanmaster

我使用了您在解決方案下編寫的內容。在我的圖像周圍使用容器，我正在縮放。謝謝！ – suMi

@bulanmaster新增。謝謝。 – GMchris

取而代之的是讓它增大2％，你能不能把它做成一個尺寸。設置尺寸會更容易，然後你就可以完全按照你的要求製作。

E.G.

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

等

來源

2016-02-05 07:55:33

我認爲你不瞭解這個問題。他希望圖像能夠「覆蓋」div，但當div被徘徊時，圖像應該以2％「放大」，同時仍然應用封面屬性。 – GMchris

css背景大小封面

回答

相關問題