Question

如何将此徽标固定在页面的中央顶部，并且不会随着浏览器更改大小而移动，因此当浏览器更改大小时，徽标将保持原来的状态，并且不会重新进入其自身。 / p>

这是我目前的CSS

CSS

#logo { 
position:absolute;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
z-index:1;
top:0px;
margin: 0 auto;
left:0px;
right:0px;
}

谢谢你的帮助

Answer 1

CSS

body
{
     height: 1000px;
}
#logo { 
position:absolute;
background-image:url('http://i.stack.imgur.com/DUYP4.jpg?s=128&g=1');
background-size:150px;
width:150px;
height:150px;
position: fixed;
margin:0 auto;
z-index:1;
top:0px;
margin: 0 auto;
left:0px;
right:0px;
}

HTML

<div id="logo">
</div>

Fiddle

Answer 2

删除您的边距，左右属性并添加以下属性：

margin-left:100px;

这样，您的图片将始终为100px。

#logo { 
  position:absolute;
  background-image:url(../img/LOGO1.png);
  background-size:150px;
  width:150px;
  height:150px;
  z-index:1;
  top:0px;
  margin-left:100px;
}

保持徽标居中但在浏览器调整大小时也会修复

2 个答案: