Question

是否可以将背景图像置于div中？我几乎尝试过所有事情 - 但没有成功：

<div id="doit">
  Lorem Ipsum ...
</div>

//CSS
#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }

这可能吗？

Answer 1

#doit {
    background: url(url) no-repeat center;
}

Answer 2

尝试background-position:center;

编辑：因为这个问题得到了很多观点，所以值得添加一些额外的信息：

text-align: center将无效，因为背景图片不是文档的一部分，因此不属于该流程。

background-position:center是background-position: center center的简写; （background-position: horizontal vertical）;

Answer 3

使用background-position：

background-position: 50% 50%;

Answer 4

如果您的背景图像是垂直对齐的精灵表，您可以像这样水平居中每个精灵：

#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: 50% [y position of sprite];
}

如果你的背景图像是水平对齐的精灵表，你可以像这样垂直居中每个精灵：

#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: [x position of sprite] 50%;
}

如果您的精灵表是紧凑的，或者您没有尝试将您的背景图像置于上述某个场景中心，则这些解决方案不适用。

Answer 5

这对我有用：

#doit{
    background-image: url('images/pic.png');
    background-repeat: no-repeat;
    background-position: center;  
}

Answer 6

对于居中或定位背景图片，您应使用background-position属性。 background-position属性设置元素的top和left边的背景图像的起始位置。 CSS语法是background-position : xvalue yvalue;。

“xvalue”和“yvalue”支持的值是长度单位，如px和百分比和方向名称，如左，右等。

“xvalue”是背景的水平位置，从元素的顶部开始。这意味着如果你使用50px它将远离元素顶部“50px”。而“yvalue”是具有相同条件的垂直位置。

因此，如果您使用background-position: center;，您的背景图片将会居中。

但我总是使用这段代码：

.yourclass {
  background: url(image.png) no-repeat center /cover;
 }

我知道它太混乱，但意味着：

.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

我也知道background-size是一个新属性，压缩代码中的/cover是什么，但这些代码意味着fill在Windows桌面背景中调整大小和定位。

您可以在here的here和background-position中查看background-size的更多详细信息。

Answer 7

这对我有用：

.network-connections-icon {
  background-image: url(url);
  background-size: 100%;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}

Answer 8

这对我有用：

<style>
   .WidgetBody
        {   
            background: #F0F0F0;
            background-image:url('images/mini-loader.gif');
            background-position: 50% 50%;            
            background-repeat:no-repeat;            
        }
</style>

Answer 9

这对我来说可以使图像与div的中心对齐。

.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

如何在div中居中（背景）图像？

9 个答案: