Question

我正在为一个客户的网站工作，其中有一个背景图片，该图片将以覆盖文字，链接等的页面为中心。

我目前的图像大小调整如下：

img.bg
   {
   height:100%;
   position:absolute;
   }

这使图像适合浏览器的高度，但将其对齐到左侧。我需要它集中在一起。

由于我需要它有条件地响应浏览器高度变化，通常的居中技巧不起作用。

谢谢！

Answer 1

尝试删除“position：absolute”并添加margin：0 auto。例如：

img.bg
{
   height:100%;
   margin: 0 auto;
}

Answer 2

或者可能只是将它放在一个表<table align="center"> <tr><td>"image goes here"</td></tr>中，它更容易管理，因为您可以毫无困难地添加更多项目到网页，添加边框，更改表格颜色等。

Answer 3

我可以想到几种方法（未经测试，所以你可能需要调整）：

img.bg {
   position: absolute;
   /* Top and/or bottom for stretching it vertically as needed. Setting both will likely make it the size of the whole body, so beware. Remove bottom to keep it from doing that if necessary. */
   top: 0;
   bottom: 0;
   /* Left and/or right for sizing/positioning */
   left: 25%; /* Percentage position will make it adjust to browser window size, exact percent may need to be tweaked to get right and will depend on the image's size. */
}


img.bg {
   display: block;
   height: 100%;
   width: 500px; /* Whatever your desired width is. */
   margin: 0 auto; /* This should work as long as width is set. */
}

根据您的确切设计，这些中的任何一个都应该起作用并响应浏览器窗口的大小。第二个可能是最灵活和最容易实现的，因为你不必摆弄定位。

Answer 4

答案取决于你究竟是在追求什么。

如果你想在网站的背景中显示一个图像（我认为你在说），那么我不确定你使用的是哪种方法，但如果你在你的html中取消img.bg{} css，只需将以下内容放入CSS即可获得所需内容......

body{
    background-image:url('background.gif'); // substitute background.gif for the correct file path
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
    background-size:auto 100%;
}

背景图像中心和调整大小

4 个答案: