html文字浮在图片上 - 如何在div中放置(背景)图像?



css image (6)

为了居中或定位背景图片,你应该使用background-position属性。 background-position属性从元素的topleft设置背景图像的起始位置。 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但是这些代码意味着在Windows桌面背景中fill背景大小和位置。

你可以在here看到关于background-position更多细节,以及background-size

https://ffff65535.com

是否有可能在div中放置背景图片? 我尝试了一切 - 但没有成功:

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

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

这可能吗?


使用背景位置:

background-position: 50% 50%;

尝试background-position:center;

编辑: 因为这个问题获得了很多意见,其值得添加一些额外的信息:

text-align: center将不起作用,因为背景图像不是文档的一部分,因此不属于流程的一部分。

background-position:centerbackground-position: center center简写background-position: center center ; ( background-position: horizontal vertical );


这适用于我:

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

这适用于我:

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

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




center