CSS - 背景大小：封面太大

當我嘗試使用具有固定位置的background-size：cover屬性時，我的圖像變得太大並且裁剪了。我希望它與原始圖像尺寸相同，但我無法弄清楚。我試圖保持圖像的影響保持原位。CSS - 背景大小：封面太大

#wrapper { 
    width:100%; 
    height:580px; 
    background-image:url('http://www.myorderdesk.com/Providers/206190/Files/31/full_width_image_1.jpg'); 
background-position: center center; 
background-attachment:fixed; 
background-repeat: no-repeat; 
background-size: 100% 100%; 
/*background-size:cover;*/ 
-webkit-transition: background-image 0.4s; 
-moz-transition: background-image 0.4s; 
-ms-transition: background-image 0.4s; 
-o-transition: background-image 0.4s; 
transition: background-image 0.4s; 
overflow: hidden; 
-webkit-font-smoothing: subpixel-antialiased; 
}

這裏是我的Demo

全屏Demo

來源

2015-12-22 StinkyTofu

這是你在做什麼之後？ https://jsfiddle.net/mxj5dfhs/31/ – Haris

也許封面不是答案..來自W3schools：「將背景圖像放大到儘可能大，使背景區域完全被背景圖像覆蓋。部分背景圖像可能無法在背景定位區域內查看「 –

我認爲背景大小相對於窗口而不是其元素。你會認爲它只是將它覆蓋到容器上，但事實並非如此。這導致了它被「裁剪」的影響。 – StinkyTofu

試試這個，而不是覆蓋：

#wrapper { 
background-size:contain; 
}

來源

2015-12-22 17:25:26

也許蓋未從W3Schools的答案..：「縮放背景圖像要儘可能大，以便背景區域完全被背景圖像覆蓋，背景圖像的某些部分可能不在v查看後臺定位是

來源

2015-12-22 17:29:16 khawar

CSS - 背景大小：封面太大

回答

相關問題