为什么背景图像在“background-attachment：local”时偏移〜25％？

是否有人可以帮助我了解为什么这个CSS：为什么背景图像在“background-attachment：local”时偏移〜25％？

<style type="text/css"> 
    html { 
     background: url(images/img.diary.1280.jpg) no-repeat center center local; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 
    body { 
     font-family: 'alpha geometrique', fantasy, cursive, sans-serif; 
     background: none; 
    }...

会使背景图片“动起来”，由〜25％，因此，只有底部〜画面的75％显示，相对于这个备用“背景：”行？

background: url(images/img.diary.1280.jpg) no-repeat center center fixed;

它显示100％的图片拟合在视口内（这是我的愿望）？

我也尝试过“滚动”，但它与“本地”具有相同的效果。我不想使用固定的原因是，当我滚动窗口时，元素（引导程序4）会滚动，但背景图像不会使元素看起来像顶部滑动。 我更喜欢&图片滚动到一起，这是我试图实现的真正目标。

由于

来源

2016-04-09 rockhammer

它与background-size: cover和图像的纵横比的事情。封面将增加图像的大小，直到它涵盖了宽度和高度，所以如果图像是纵向的并且窗口是横向的，它将增加图像的尺寸（保持方面），直到它与窗口一样宽，使窗口更高比窗口，因为你有它垂直居中顶部和底部将不可见。试试这个：

html { 
    background: url(images/img.diary.1280.jpg) no-repeat center center local; 
    -webkit-background-size: contain; 
    -moz-background-size: contain; 
    -o-background-size: contain; 
    background-size: contain; 
    }

蕴藏像最适合的，反而会增加（或减少）图像的大小，将适合的窗口中的最大尺寸。

来源

2016-04-09 02:53:04

感谢您的建议，Arleigh。使用“包含”时，图像不会伸展（如您指出的那样）以填充视口。但是你确实指出了我的正确方向。我需要的是将'background-position：center center'改为'background-position：center top'，同时保留'background-attachment：local'。现在我有两种我想要的行为。谢谢。 – rockhammer

荣誉Arleigh Hix为我指出了正确的方向。

我需要的是将background-position: center center更改为background-position: center top，同时保持background-attachment: local。现在我有两种我想要的行为。

来源

2016-04-09 09:44:30 rockhammer

荣誉是伟大的，但如果我帮你理解为什么这个CSS会使背景图像“向上移动”，如你所问，请你接受我的答案，谢谢。 –

为什么背景图像在“background-attachment：local”时偏移〜25％？

回答

相关问题