使用background-size進行協調：在從psd文件構建網站時進行協調？

當我使用background-size: cover;時，它會導致圖像縮放以適合屏幕。這種縮放意味着背景圖像與我試圖複製的psd文件的尺寸不匹配。如何保持background-size: cover;提供的響應能力，同時保持psd的精確測量結果？非常感謝您的幫助。使用background-size進行協調：在從psd文件構建網站時進行協調？

HTML：

<body> 
    <div class="bg-img"></div> 
</body>

CSS：

.bg-img { 
    position: absolute; 
    background: url(../images/site-bg.jpg) no-repeat; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
}

來源

2015-01-21 Markus Hallcyon

background: url(../images/site-bg.jpg) no-repeat center center;

？

來源

2015-01-21 00:59:03 Darkrum

這只是使圖像更大，遠遠高於'背景大小：cover'。謝謝您的幫助！ – 2015-01-21 02:48:22

如果你的目的是使背景圖像能長到源圖像的最大「自然」的大小，然後不進行縮放任何較大，這也很可能要通過媒體查詢某種組合（實現測試各種尺寸的縱向，橫向和方形窗口大小），CSS或JavaScript。

您可以考慮使用max-width和/或max-height屬性以及top: 0; bottom: 0; left: 0; right: 0; margin: auto;。這可能會產生可接受的結果，但可能JavaScript是您需要查找最可靠結果的地方。

來源

2015-01-21 05:46:13

我擔心這一點。感謝您的洞察力。 – 2015-01-21 16:04:15

使用background-size進行協調：在從psd文件構建網站時進行協調？

回答

相關問題