CSS和不同尺寸的显示器?
Posted
技术标签:
【中文标题】CSS和不同尺寸的显示器?【英文标题】:CSS and different size of monitor? 【发布时间】:2011-03-02 13:06:27 【问题描述】:我正在做一个网站 (WIP)。我遇到了一些CSS问题,希望你们能帮助我。
我现在的情况:
我有一张图片,我们称之为“bg.png”,宽度约为 2500 像素,背景图片的中心有我的徽标。 我的网站应该面向所有规模(从 800 x 600 到 2400 x XXX 的小型)用户。我的问题:
如何使背景图片(bg.png)居中,使徽标始终位于不同尺寸的显示器屏幕的居中(水平)?【问题讨论】:
作为新用户,如果答案符合您的需求,请务必点击“接受”。 顺便说一下问题(当前情况 -> 问题/期望的行为)。 您应该知道有些屏幕大于 2500。而且您也可以在多个屏幕上扩展某些内容。所以 2500 不是一个足够大的限制。 谢谢大家,你们都很友好和乐于助人:) 【参考方案1】:如果它只是一个你可以使用的徽标文件
<style>
img
position:absolute;
left:-50%;
top:-50%;
z-index:-1;
</style>
【讨论】:
这不会使图像完全居中。图像的左侧居中,但图像的中心未居中。 为此,添加 margin-left: -50%, margin-top: -50%。【参考方案2】:#your_img
position: absolute;
left: 50%;
margin: -1250px;
当您将 img 元素放到另一个盒子上时,此解决方案是必要的。但要小心 - 它可能会改变父框的大小。
【讨论】:
【参考方案3】:#your_img
width: 2500px; //In example 2500px
margin: 50%;
padding: -1250px; // 2500 divided by 2
它可能在 Internet Explorer 上不起作用,但您可以使用 position: absolute 的小技巧,如上所述
【讨论】:
【参考方案4】:body background: url('bg.png') 50% 50% no-repeat;
这会将图片以全尺寸放置在页面的中心,并且用户将在其浏览器窗口允许的范围内看到尽可能多的背景图片。
【讨论】:
谢谢,它有效。但我需要再等 9 分钟才能接受答案。谢谢 Graphain 欢迎小学生,乐于助人。值得注册,这样您就可以随着时间的推移跟踪您的问题和答案,并鼓励其他人帮助您。 嗨 Graphain,它适用于 FF、chrome、opera 和 safari。但是在IE上不行,图片不显示。 问题已解决。而不是像这样将所有属性放在 1 行中: background: url('images/bg.png') 50% 50% no-repeat;我将它们分成: background: url('images/bg.png') no-repeat;背景位置:50% 50%; 很好的修复。也许顺序在 IE 上很重要,或者缺少一个属性(比如开始时的 bg 颜色)。以上是关于CSS和不同尺寸的显示器?的主要内容,如果未能解决你的问题,请参考以下文章