我试图在元素中添加一个背景,但是图像非常大。因此,使用背景:盖子保留图像的实际大小,而不对其进行居中.因此,图像看起来非常“放大”,因为它没有显示出尽可能多。
因此,这里有一个问题:我如何使图像尽可能小,同时仍然覆盖整个元素。此外,我怎样才能正确地对齐它呢?
附我有什么背景:封面给我,和一个简单的photoshop模型,我想要什么。我用红色勾勒出背景的边界。
背景:覆盖小宽度

小宽度Photoshop模拟

背景:覆盖大宽度

具有大宽度的Photoshop模型

发布于 2015-04-19 03:00:36
当前,#home的background-position声明设置为0,0;
这些数字表示背景图像的x轴(水平放置)和y轴(垂直放置).我和巡查员一起玩,并且能够把背景图像的位置移动得更符合我的喜好。如果关键字对你更有意义,你也可以尝试使用它们。
background-position: top left;或者也许:
background-position: center center;百分比也是一种选择:
background-position: 25% 50%;关键字和百分比也分别适用于x轴和y轴.
有关更多信息,请查看MDN文章:https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
最后一个注意事项,您的背景图像是巨大的-7.1MB准确地说。如果您可以将它的大小降低到至少1MB (虽然低于500 to将是理想的),我将完全推荐。
https://stackoverflow.com/questions/29725238
复制相似问题