使用Wordpress主题,并且在重新调整浏览器窗口大小时,需要让蓝色模糊背景与滑块保持一致。我已经实现了这个目标,但我注意到当你缩小浏览器时,一切都没有保持居中,左边有一个很大的空间。解决这个问题的最佳方法是什么?
答案 0 :(得分:0)
这是因为您的滑块居中解决方案不够优雅,并且依靠固定宽度和绝对定位使其看起来正确。
要解决此问题,您需要更改一些内容。
将 #homebgw 更改为:
#homebgw {
background: url("http://www.stringcreative.ca/wp/wp-content/themes/Rbox2Pro/images/masthead.jpg") no-repeat scroll 50% -117px transparent;
height: 411px;
width: 100%;
}
将 #header 更改为:
#header {
background: url("http://www.stringcreative.ca/wp/wp-content/themes/Rbox2Pro/images/masthead.jpg") no-repeat scroll 50% 0;
height: 100px;
margin: 0 auto;
padding-bottom: 35px;
width: 1400px;
}
很简单,您不需要绝对定位来解决上面发布的问题。如果您使用绝对定位和负边距来纠正中心对齐问题,那么您可能做错了什么。保持简单,谷歌如何实现您想要的结果。网上有很多有用的文档来实现这些基本结果,而无需修复代码;)
答案 1 :(得分:0)
网站有点混乱,你需要有图像的包装,然后容器的中心大小相同
#wrapper {
background: #000b1a url("http://www.stringcreative.ca/wp/wp-content/themes/Rbox2Pro/images/masthead.jpg") no-repeat fixed top center;
}
#header_container {
margin: 0 auto;
height: 117px;
width: 960px;
position: relative;
}
不需要将很多位置设置为绝对值,并将边距设置为 - 以使其适合。 还要研究960网格系统。我一直都在使用它,并节省了大量时间让网站适应。希望这有帮助