尝试将文本与背景图像对齐。如果低于某个分辨率,左侧的文本会移入。我该如何解决这个问题?

发布于 2024-10-15 10:19:40 字数 539 浏览 3 评论 0原文

这是我正在使用的CSS代码:

#wrapper{
 position:relative;
 width:950px;
 margin-left:auto;
 margin-right:auto
}

#content {
 text-align: left;
 padding: 0px 25px 0px 25px;
    margin-left: auto;
    margin-right: auto;
 position: absolute;
 left: 50%;
 /*half of width of element*/
 margin-left: -450px;
 height: auto;
 }

这是网站: http://projectstratos.com/31 -01-11/

请忽略社交图标和身高问题。

为了明白我的意思,让你的浏览器变得更小和更大。文本向右移动,而背景图像保持居中。我该如何解决这个问题?

Here is the css code I am using:

#wrapper{
 position:relative;
 width:950px;
 margin-left:auto;
 margin-right:auto
}

#content {
 text-align: left;
 padding: 0px 25px 0px 25px;
    margin-left: auto;
    margin-right: auto;
 position: absolute;
 left: 50%;
 /*half of width of element*/
 margin-left: -450px;
 height: auto;
 }

And this is the site: http://projectstratos.com/31-01-11/

Please ignore the social icons and the height issues.

To see what I mean make your browser smaller and bigger. The text moves to the right while the background image stays centered. How can I fix this?

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

染墨丶若流云 2024-10-22 10:19:40

我不相信您所提出的问题有真正的“解决方案”。
当您说文本实际上“向右移动”时,文本根本没有移动。
您的背景图像只是试图将其自身保持在您正在更改的水平轴的中心。

例如..如果您有 Bungie 的网站 http://www.bungie.net/Projects/到达/default.aspx,您将执行相同的操作。你会得到和你一样的“效果”。唯一的区别是他们网站中的文本背景不是背景图像的一部分。

为了“解决”您的问题,您需要执行以下操作。

  1. 将背景(行星、太空等)与徽标、紫色框等分开。
  2. 将空间、行星等保持在与现在的背景图像相同的位置。
  3. 取出紫色框并将其放入它自己的 div 中,该 div 包含您的所有内容

您的代码将类似于此:

<body>
  <div id="purpleboxbackgroundimage">
    <div id="contentandtext">
      <h1>jhkljhlkjhlkj</h1>
    </div>
  </div>
</body>

我希望这会有所帮助。

I don't believe there's an actual 'fix' for the problem you're presenting.
When you say that the text 'moves to the right' in reality- the text is not moving at all.
Your background image is just trying to maintain itself in the center of the horizontal axis- which you're changing.

For example.. If you got Bungie's website http://www.bungie.net/Projects/Reach/default.aspx and you perform the same action. You'll get the same 'effect' that you are. The only difference is that the background of the text in their website isn't a part of the background image.

Here's what you need to do in order to 'fix' you're problem.

  1. Separate the background (planet, space, etc..) from the logo, purple box etc.
  2. Keep the space, planet, etc.. in the same spot as the background image that's there now.
  3. Take the purple box and put it in it's own div that wraps around all your content

You're code will look similar to this:

<body>
  <div id="purpleboxbackgroundimage">
    <div id="contentandtext">
      <h1>jhkljhlkjhlkj</h1>
    </div>
  </div>
</body>

I hope this helps.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文