垂直拉伸背景圖像

我想弄清楚如何垂直拉伸背景圖像。我使用CSS3用下列方式3倍的圖像：垂直拉伸背景圖像

background-image: url("left.png"), url("right.png"), url("center.png") 
background-repeat: no-repeat, no-repeat, repeat-x 
background-position: top left, top right, top

現在我要垂直拉伸這些圖片，他們一路的底部延伸。有沒有辦法做到這一點？

來源

2012-10-02 user1539137

我不這麼認爲。然而，您可以調整（伸展/壓扁）''標籤的大小，解決方案可能涉及在背景中放置一個''，絕對定位等。 – KRyan

這可能是一個好看的地方： http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only – MikeB

此外，很確定你不應該像你那樣在你的'url's中引用引號。 – KRyan

嘗試：

background-size: 100% 100%;

第一100%爲寬度和所述第二對的高度。在你的情況，你需要第二套100%

來源

2012-10-02 16:45:52

如何將高度設置爲100％？如果我做背景大小：100％，它將寬度和高度設置爲100％。 – user1539137

這非常方便。就我而言，我設置了「背景大小：960像素，100％;」以獲得所需的效果。 –

我來晚了這裏的聚會，但是這是對我工作：

background-size: auto 100%;

這將垂直適應圖像，讓寬度爲所欲爲它需要做（我認爲它默認重複）。您還可以設置：

background-repeat: no-repeat;

它不重複在水平方向的圖像。

來源

2013-11-18 19:48:28

我還需要設置'背景位置：中心;' – KIC

歡迎加入派對，但是很晚。 – McNab

'background-size：cover;'值得探索 –

垂直拉伸背景圖像

回答

相關問題