CSS 将图片放在页面顶部

Posted 2023-05-08

【中文标题】CSS 将图片放在页面顶部

【英文标题】：CSS Put image at top of page

【发布时间】：2011-02-22 03:30:36

【问题描述】：

我需要在 css 中的网页顶部中心放置一张图片。现在，我只是在 css 中使用 background-image:，但这会将它放在页面的中间。

这是我的代码：

body 
  background-image: url("theimageurlgoeshere"); //The image is 842 x 508
  background-attachment:fixed;
  background-position: center top;
  background-repeat: no-repeat;

此外，更改background-position: 似乎对站点的结果没有影响。任何帮助表示赞赏。

【问题讨论】：

你的目标浏览器是什么？

不是background-attachment:fixed;。

【参考方案1】：

将这些值的排列从center top更改为top center

background-position: top center;

在 Safari 4、Chrome 和 FF 3.5 中测试

我在测试中使用的代码是：

 body  background: url(./image.png) no-repeat top center; 

【讨论】：

根据w3schools：第一个值为水平位置，第二个值为垂直位置——w3schools.com/css/pr_background-position.asp

引用 w3.org/TR/CSS2/colors.html#background-properties 作为澄清的适当来源。 :-)

您的参考说明（比 w3schools 更准确）：如果至少有一个值不是关键字，则第一个值表示水平位置，第二个值表示垂直位置。 “not a keyword”表示“top center”和“center top”都是有效的用法。

【参考方案2】：

如果你希望它在一行中：

body 
  background: url('path') center top fixed no-repeat;

更多信息：http://www.w3schools.com/css/pr_background-position.asp

【参考方案3】：

如果这不起作用。做margin:0 auto;