Question

所以我有一个div，其中有一个背景图片。

<div id="articles_base" style="background-image:url(http://www.michaeldylanedwards.co.uk/admin/uploads/{page_alias})" style="background-position:center center" width: 235px; height: 240px;>

所以我需要知道的是从左上角开始而不是div的背景图像，如何让它从中心开始，而不是调整大小？

一如既往，任何帮助都很棒：）

Answer 1

您使用background-position:center走在正确的轨道上。但是，您有两个style属性和一些错误的引号，这会使您的HTML无效。

此外，根据您要查找的内容，您可能希望阻止图片重复background-repeat:no-repeat。

＆＃13;

<div id="articles_base" style="
  width: 200px;
  height: 180px;
  background-color: #CCC;
  background-image: url('http://lorempixel.com/100/80/abstract/1/');
  background-position: center;
  background-repeat: no-repeat;"></div>

＆＃13;

我建议使用CSS定义而不是内联样式，如下面的演示：

＆＃13;

div {
  width: 200px;
  height: 180px;
  background-color: #CCC;
  background-image: url('http://lorempixel.com/100/80/abstract/1/');
  background-position: center;
  background-repeat: no-repeat;
}

＆＃13;

<div></div>

＆＃13;

Answer 2

我正在阅读您的问题的方式是您希望图片的左上角（即开头）位于div的中心，对吗？

由于您的图片具有已知尺寸（235像素x 240像素），因此您可以使用background-position设置背景左上角的位置，如下所示：

background-position: 117px 120px;

Answer 3

background-position: center center;
background-position: 50% 50%;

也适用; - ）

仅显示图像的一部分时，使div的背景图像居中？

3 个答案: