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

112

是否有可能将背景图像居中在一个div中？我已经试过几乎所有 - 但没有成功：如何在div中放置（背景）图像？

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

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

这可能吗？

来源

2011-02-18 oompahloompah

238

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

来源

2011-02-18 10:39:11

尝试background-position:center;

编辑：因为这个问题，获得了大量的意见，它的价值增加了一些额外的信息：

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

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

来源

2011-02-18 10:36:30

哦，我只是Lurrve所以！ – oompahloompah 2011-02-18 10:41:16

实际上你只需要`background-position：center;` – 2012-07-11 09:23:15

所选答案会导致我的整个背景由于某种原因消失（公平我正在做一些可能导致它的jquery的东西？），但是这个答案是有效的。给予好评。 – bwoogie 2017-07-18 20:15:04

使用background-position：

background-position: 50% 50%;

来源

2011-02-18 10:36:44 Capsule

这个工作对我来说：

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

来源

2014-05-13 22:04:39

这个工作对我来说：

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

来源

2014-12-12 16:18:22

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

#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%; 
}

如果你的精灵表是紧凑的，或者你不要试图将您的背景图像置于上述场景之一中，这些解决方案不适用。

来源

2015-04-25 00:25:27

这个工作对我来说：

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

来源

2016-12-07 20:19:46

对中心或定位，你应该使用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和background-size的here中查看background-position的更多详细信息。

来源

2017-03-17 15:44:04

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

回答

相关问题