所有浏览器中的背景图像居中且100%

Question

所有浏览器中的背景图像居中且100%

在所有浏览器中设置背景图像居中和100%(使其填满屏幕,但仍保留纵横比)的最佳做法是什么？

Answer 1

我到目前为止设法做出的最佳解决方案如下:

//CSS
<style type="text/css">
   body {
       margin:0; padding:0;
   }
   html, body, #bg {
       height:100%;
       width:100%;
   }
   #bg {
       position:absolute; 
       left:0;
       right:0;
       bottom:0;
       top:0;
       overflow:hidden;
       z-index:0;
   }
   #bg img {
       width:100%;
       min-width:100%;
       min-height:100%;
   }
   #content {
       z-index:1;
   }
</style>

//HTML
<body>
<div id="bg">
   <img style="display:block;" src="bgimage.jpg">
</div>
<div id="content">
   //Rest of content
</div>
</body>

Run Code Online (Sandbox Code Playgroud)

这可能是最好的方法吗？有人看到这样做有什么问题吗？

谢谢你的时间!

Answer 2

Dio*_*ane 8

最好的做法是不要做你想做的事.

通过指定100%,您将拉伸(从而扭曲)图像.

拥有简单,集中的背景的最佳方式是这样的:

body {
    background-image:url(Images/MyBG.png);
    background-position:center top;
    background-repeat:no-repeat
}

Run Code Online (Sandbox Code Playgroud)

编辑:

现在,您可以通过指定与分辨率相关的样式表来定位不同的分辨率并使用不同的背景图像,具体取决于大小.您可以使用单独的样式表来定义一个背景元素,每个背景元素中包含不同的文件.

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

Run Code Online (Sandbox Code Playgroud)

请参阅:http://css-tricks.com/resolution-specific-stylesheets/

或W3C CSS媒体查询规范.

Answer 3

小智 4

拿起旧帖子，因为有一种新方法可以在良好的浏览器支持下完成此操作。

\n\n

使用background-image像这样

\n\n

background-size:cover;\nbackground-position:center;\n

Run Code Online (Sandbox Code Playgroud)\n\n

这不会破坏图像的比例，而是尽可能地缩放图像，而不会显示任何黑条（或背景中的任何黑条）。

\n\n

正如您在“我可以使用它吗？”中看到的那样，浏览器支持几乎是完美的。。Opera Mini 可能是一个问题，但该浏览器可能很快就会被 Vivaldi 取代。

\n\n

总之，我认为这绝对是可行的方法，因为它\xc2\xb4s是迄今为止最干净、最可靠的解决方案，并且也很容易用 JS 进行编辑。

\n

归档时间：	15 年，8 月前
查看次数：	75814 次
最近记录：	9 年，9 月前