首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >背景覆盖最小尺寸和中心

背景覆盖最小尺寸和中心
EN

Stack Overflow用户
提问于 2015-04-19 02:48:58
回答 2查看 217关注 0票数 0

我试图在元素中添加一个背景,但是图像非常大。因此,使用背景:盖子保留图像的实际大小,而不对其进行居中.因此,图像看起来非常“放大”,因为它没有显示出尽可能多。

因此,这里有一个问题:我如何使图像尽可能小,同时仍然覆盖整个元素。此外,我怎样才能正确地对齐它呢?

附我有什么背景:封面给我,和一个简单的photoshop模型,我想要什么。我用红色勾勒出背景的边界。

背景:覆盖小宽度

小宽度Photoshop模拟

背景:覆盖大宽度

具有大宽度的Photoshop模型

EN

回答 2

Stack Overflow用户

发布于 2015-04-19 03:00:36

当前,#home的background-position声明设置为0,0;

这些数字表示背景图像的x轴(水平放置)和y轴(垂直放置).我和巡查员一起玩,并且能够把背景图像的位置移动得更符合我的喜好。如果关键字对你更有意义,你也可以尝试使用它们。

代码语言:javascript
运行
复制
    background-position: top left;

或者也许:

代码语言:javascript
运行
复制
    background-position: center center;

百分比也是一种选择:

代码语言:javascript
运行
复制
    background-position: 25% 50%;

关键字和百分比也分别适用于x轴和y轴.

有关更多信息,请查看MDN文章:https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

最后一个注意事项,您的背景图像是巨大的-7.1MB准确地说。如果您可以将它的大小降低到至少1MB (虽然低于500 to将是理想的),我将完全推荐。

票数 0
EN

Stack Overflow用户

发布于 2015-04-19 09:32:40

我不确定这是否有帮助,因为我还没有尝试过;但是,基本上有一个名为背景大小的属性:并且大小可以是%,所以如果您希望背景图像为所需大小的50% (宽度和高度)或50% 75% (宽度和高度)。

参见文档背景-大小也见示例

希望这能帮到伦敦的阿兰?米奥。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/29725238

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档