Question

我一直在努力解决webkit浏览器（chrome＆amp; safari）上的问题，同时为从右到左的读者（阿拉伯语和希伯来语）调整网站。最后我将其报告为WebKit bug，但我仍需要解决此方法。

问题

将背景图像指定给body标签，并将此背景图像置于右侧并重复y。现在，使窗口变小，直到出现水平滚动条。背景图片将不再与文档右侧对齐，它将位于左侧x像素的位置，x是视口的宽度。

这是一个简化的例子，隔离了问题。 “内容”一词应始终位于背景图像的蓝色部分之上。

<html dir="rtl">
<head>
  <style type="text/css">
  body {
    margin: 0;
    background-image: url(data:image/png;base64, ...);
    background-position: top right;
    background-repeat: repeat-y;
  }
  #contents {
    width: 900px;
    height: 900px;
  }
  </style>
</head>
<body>
  <div id="contents">Contents</div>
</body>
</html>

您还可以看到WebKit错误报告中包含的screendump。

有什么想法吗？

Answer 1

使用绝对定位元素怎么样？

<html dir="rtl">
<head>
<style type="text/css">
body {
    margin: 0;
}
#bg {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvgAAAACAgMAAABQ2kAmAAAAAXNSR0IArs4c6QAAAAlQTFRF5ev/9Pb/////KIKAcgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfcCQIMFSrrJQqoAAAAFUlEQVQY02PgWjU4wQoGokDUkHY+ACqhykF2Ey1yAAAAAElFTkSuQmCC);
    background-position: top right;
    background-repeat: repeat-y;
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
#contents {
    width: 900px;
    height: 900px;
}
</style>
</head>
<body>
<div id="bg"></div>
<div id="contents">Contents</div>
</body>
</html>

似乎对我来说是一种解决方法。

CSS主体`background-image`在Chrome，Safari（webkit）上对齐

1 个答案: