当前位置：文江博客话题详情

如何将背景图像放置在偏离中心的位置？

发布于 2024-09-16 01:34:35 字数 286 浏览 2 评论 0原文

我有一个背景图像设置为中心并且需要固定位置。不过我想将它稍微偏离中心 100px，有什么想法吗？

CSS 背景：url(styles/images/bg.png) 无重复中心0；背景附件：固定；

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你好，陌生人 2024-09-23 01:34:35

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

回复收藏 0 原文

爱人如己 2024-09-23 01:34:35

您可以通过将背景放置在距左侧或右侧接近 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>

You can do this by positioning your background something close to 50% from the left or right. If you need it a specific number of pixels left/right from the center, you will need to use calc() to add an offset of a different unit. For instance if you want the background shifted 100 pixels left from bein center, you'll need to use background-position: left calc(50% - 100px). Pay special attention to the spacing inside the parentheses as they are mandatory. If you want there to be 100 pixels from the edge of the background image and the center line, you'll also need to subtract half the width of the background image.

To elaborate on this further (in case it's useful), I had two separate scenarios I was trying to solve. I was looking for how to position a background image to start at the side of a responsive element at all times without changing any HTML. The element was centered on the page at all times and changed widths depending on the screen size. The first example matches your question, which is that the element was a fixed number of pixels wide so my background image had to be half that number of pixels to the left of center in addition to half the width of the background image (this is what the first paragraph describes).

The second scenario is that the main element was 85% of the page size. This makes the margin on the left side 7.5%, but to correctly handle this you need to set background-position to the following: calc(7.5% - var(--image-width) * 0.925) (replacing var(--image-width) with the background image width in units of pixels and 0.925 being the difference between 1 and the decimal representation of 7.5%, or 1 - 0.075).

Here are some examples:

: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>

回复收藏 0 原文