如何解决背景图像居中并调整大小
| 我正在为一个客户的网站工作,在该网站上有一个背景图片,该图片将在页面上居中放置文本,链接等。 我目前已将图像调整为如下尺寸:img.bg
{
height:100%;
position:absolute;
}
这使图像适合浏览器的高度,但将其向左对齐。我需要将它居中。
由于我需要它能够有条件地响应浏览器高度的变化,因此通常的居中技巧都行不通。
谢谢!
解决方法
尝试删除\“ position:absolute \”并添加空白:0自动。例如:
img.bg
{
height:100%;
margin: 0 auto;
}
,或者可以将其放置在表格ѭ2中,这样更易于管理,因为您以后可以毫不费力地向网页中添加更多项目,添加边框,更改表格颜色等。
,我可以想到几种解决方法(未经测试,因此您可能需要进行调整):
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. */
}
根据您的确切设计,这两种方法中的任何一种都应该起作用,并且可以响应浏览器窗口的大小。第二个可能是最灵活,最容易实现的,因为您不必摆弄位置。
,答案取决于您所追求的。
如果您想在网站的背景中显示图片(我想您是在说),那么我不确定您使用的是哪种方法,但是如果您在HTML和CSS中删除了img.bg{}
,则只需输入以下内容即可到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%;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。