Question

我将背景图像设置为居中，需要固定位置。不过我想把它偏离中心100px，任何想法？

CSS background：url（styles / images / bg.png）无重复中心0; background-attachment：fixed;

这是工作样本 http://www.warface.co.uk/clients/detail-shoppe/

Answer 1

创建宽度为300px（分别为左或右）的较大背景图像会使背景从中心移动150px。 background属性中没有css样式可以执行此操作。如果你不想创建更多的div，这是唯一的方法。

Answer 2

您可以通过将背景放置在距离左侧或右侧接近 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&nbsp;</div><div class="right">&nbsp;Line</div>
  </div>
  <div class="div2">300px wide</div>
  <div class="div3">90% wide</div>
</div>

Answer 3

看起来像background-position正是您要找的。

查看此link了解详情

如何将背景图像偏离中心？

3 个答案: