Css 背景位置：将左角置于中间

希望这张图片能解释更多，我想要什么

（图像的透明部分应表明其大于

.content

Div:-）

是否有一种几乎节省的方式（最好只是CSS）让背景图像从中心开始

background-position: center top;

…将使用图像的中心，而不是左角

---

我无法操作图像本身（使用透明偏移量）也无法使用绝对值。

如果不使用绝对值，您将无法使用所需元素上的背景图像来执行此操作。有关原因的说明，请参见。简言之，带有百分比和关键字值的背景定位就像一个滑动拼图，将图像严格保持在元素的背景定位区域内。只有绝对值不受此行为的影响

您可以通过将图像改为所需元素的伪元素的背景来作弊，但这要求所需元素相对定位，并充当所有绝对定位子体的包含块，包括伪元素：

.content{
位置：相对位置；
高度：200px；
边框：1px实心；
}
.content#one{宽度：100px；}
.content#two{宽度：200px；}
.内容：：以前{
内容：''；
位置：绝对位置；
左：50%；
宽度：50%；
身高：100%；
背景：url(http://placehold.it/150x150)不重复；
}

---

如果不使用绝对值，您将无法在所需元素上使用背景图像执行此操作。有关原因的说明，请参见。简言之，带有百分比和关键字值的背景定位就像一个滑动拼图，将图像严格保持在元素的背景定位区域内。只有绝对值不受此行为的影响

您可以通过将图像改为所需元素的伪元素的背景来作弊，但这要求所需元素相对定位，并充当所有绝对定位子体的包含块，包括伪元素：

.content{
位置：相对位置；
高度：200px；
边框：1px实心；
}
.content#one{宽度：100px；}
.content#two{宽度：200px；}
.内容：：以前{
内容：''；
位置：绝对位置；
左：50%；
宽度：50%；
身高：100%；
背景：url(http://placehold.it/150x150)不重复；
}

---

可以使用伪元素完成

.cimg{
边框：1px纯黑；
高度：400px；
位置：相对位置；
}
.cimg：：之后{
内容：“；
位置：绝对位置；
左：50%；
排名：0；
身高：100%；
宽度：50%；
背景图像：url（“http://www.youramazingplaces.com/wp-content/uploads/2014/06/sunset-5.jpg");
背景重复：无重复；
背景尺寸：400px；
}

---

可以使用伪元素完成

.cimg{
边框：1px纯黑；
高度：400px；
位置：相对位置；
}
.cimg：：之后{
内容：“；
位置：绝对位置；
左：50%；
排名：0；
身高：100%；
宽度：50%；
背景图像：url（“http://www.youramazingplaces.com/wp-content/uploads/2014/06/sunset-5.jpg");
背景重复：无重复；
背景尺寸：400px；
}

为此，您需要添加“背景尺寸：封面”，这与询问者想要的正好相反。您必须设置

背景位置

像素值（在X轴上）。对于关键字或百分比值，我认为这是不可能的。请提供您当前使用的代码。据我所知，仅使用

background

properties无法实现这一点，您可以通过使用伪元素来伪造您想要的效果。为此，您需要添加“background size:cover”，这与询问者想要的正好相反。您必须设置

background position

像素值（在X轴中）。对于关键字或百分比值，我认为这是不可能的。请提供您当前正在使用的代码。据我所知，仅使用

background

properties无法实现这一点，您可以使用伪元素来伪造您想要的效果。