【问题标题】:CSS3 Background Image not going behind body?CSS3背景图片不在身体后面?
【发布时间】:2014-03-25 10:57:40
【问题描述】:

我有一个背景图片,当我将它写在我的身体标签中时,背景图片可以工作,但它与我身体上的文字重叠。我想将它放在身体后面,我尝试使用background-position,但它不起作用。如何将背景图像放在主体后面,使其不重叠?

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 87.5%;
  width: 800px;
  background-color: #ffffff;
  border-color: #000000;
  box-shadow: #000000;
  background: url(../images/bats.gif) center;
  background-position: bottom;
  text-align: center;
  margin: 1em auto;
  border: 5px black;
  box-shadow: 3px 3px 3px 3px;
}

【问题讨论】:

  • 我们可以看看一些代码吗?
  • “当我把它写在我的 body 标签中时,背景图片可以工作,但它会覆盖我身上的文字”——那你一定搞砸了——这不正常背景图像的行为(顾名思义,它在背景中)。你的大部分内容可能是绝对定位的还是什么? “我想将它定位在身体后面,我尝试使用 background-position,但它不起作用” - 当然不是,因为 background-position 用于在 x 轴和 y 轴上定位,而不是在 z 轴上。

标签: html image css background


【解决方案1】:

我试过你的代码,它可以工作(背景图片在文本后面)see here

您可以将背景添加到您的 html 标签中。

DEMO

html
{  
 background: url("paste your image url here");
}

补充:如果你想让背景图片覆盖你的全屏(浏览器),你可以使用 background-size:cover;

祝你好运!! (对不起,如果这不符合您的要求)。

【讨论】:

    猜你喜欢
    • 2012-07-02
    • 2012-12-16
    • 2016-08-17
    • 2018-02-25
    • 2017-11-22
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多