我有一个背景图像设置为中心，需要固定位置。不过，我想将它从中心轻推 100 像素，有什么想法吗？
CSS 背景：url(styles/images/bg.png) 无重复中心 0； 背景附件：固定；
【问题讨论】：
标签： css background-image
创建宽 300 像素（分别为左或右）的较大背景图像会将背景从中心移动 150 像素。背景属性中没有 CSS 样式可以执行此操作。如果您不想创建更多的 div，这是唯一的方法。
【讨论】：
您可以通过将背景放置在距左侧或右侧近 50% 的位置来做到这一点。如果您需要从中心向左/向右特定数量的像素，则需要使用calc() 添加不同单位的偏移量。例如，如果您希望背景从中心向左移动 100 像素，则需要使用background-position: left calc(50% - 100px)。请特别注意括号内的间距，因为它们是强制性的。如果您希望背景图像的边缘和中心线之间有 100 个像素，您还需要减去背景图像宽度的一半。
为了进一步详细说明（如果有用的话），我尝试解决两个不同的场景。我一直在寻找如何定位背景图像以始终从响应元素的一侧开始而不更改任何 HTML。该元素始终以页面为中心，并根据屏幕大小改变宽度。第一个示例与您的问题相匹配，即元素是固定数量的像素宽，因此我的背景图像除了背景图像宽度的一半之外，还必须是中心左侧像素数的一半（这就是第一段描述）。
第二种情况是主要元素占页面大小的 85%。这使得左侧的边距为 7.5%，但要正确处理此问题，您需要将 background-position 设置为以下内容：calc(7.5% - var(--image-width) * 0.925)（将 var(--image-width) 替换为以像素为单位的背景图像宽度，0.925 是两者之间的差异1 和 7.5% 的十进制表示，或 1 - 0.075)。
这里有一些例子：
:root {
/* Informational: */
--background-width: 100px;
}
.div2 {
width: 300px;
}
.div3 {
width: 90%;
}
.background {
/* Using multiple backgrounds, labeled below */
background-position: top left calc(50% - var(--background-width) / 2),
top left calc(50% - var(--background-width) / 2 - 150px),
top left calc(5% - var(--background-width) * 0.95);
/* Line 1: Position 50% over, then subtract half the background
width (100px / 2) to shift background edge from center */
/* Line 2: Center, then subtract half the background width (100px / 2),
then subtract half the element width (300px / 2) to shift
150 pixels from background edge to center */
/* Line 3: Position 5% over, then 5% the background width (100px * 0.95)
to shift background edge from 5% mark */
}
/* EVERYTHING BELOW CAN BE IGNORED. Scenario setup: */
div div {
box-sizing: border-box;
margin: 10px auto;
border: 1px solid black;
height: 30px;
text-align: center;
}
.div1 div {
margin: 0;
display: inline-block;
width: 50%;
border: none;
}
.div1 .left {
text-align: right;
}
.div1 .right {
text-align: left;
border-left: 1px solid black;
}
.background {
margin: 0 40px;
/* Emulates background image examples: */
background-image: linear-gradient(#f77 30px, transparent 30px),
linear-gradient(transparent 40px, #3d3 40px, #3d3 70px, transparent 70px),
linear-gradient(transparent 80px, #77f 80px);
background-repeat: no-repeat;
background-size: var(--background-width) auto;
}All colored background boxes are applied from the parent element:
<div class="background">
<div class="div1">
<div class="left">Center </div><div class="right"> Line</div>
</div>
<div class="div2">300px wide</div>
<div class="div3">90% wide</div>
</div>【讨论】：
看起来background-position 就是您要查找的内容。
查看link了解更多详情
【讨论】：