CSS主体“背景图像”在Chrome上右对齐，Safari（webkit）_Css_Background Image_Right To Left_Document Body

CSS主体“背景图像”在Chrome上右对齐，Safari（webkit）

css

CSS主体“背景图像”在Chrome上右对齐，Safari（webkit）,css,background-image,right-to-left,document-body,Css,Background Image,Right To Left,Document Body,我一直在努力解决webkit浏览器（chrome和safari）的问题，同时为从右到左的读者（阿拉伯语和希伯来语）修改网站。最后，我报告这是一个问题，但我仍然需要解决这个问题问题将背景图像指定给body标记，并将此背景图像定位到右侧，然后重复-y。现在，缩小窗口直到出现水平滚动条。背景图像将不再与文档右侧对齐，它将被定位在距离左侧x像素处，其中x是视口的宽度下面是一个简单的示例，用于隔离问题。“内容”一词应始终位于背景图像蓝色部分的顶部 <html dir="rtl"> <

我一直在努力解决webkit浏览器（chrome和safari）的问题，同时为从右到左的读者（阿拉伯语和希伯来语）修改网站。最后，我报告这是一个问题，但我仍然需要解决这个问题

问题

将背景图像指定给body标记，并将此背景图像定位到右侧，然后重复-y。现在，缩小窗口直到出现水平滚动条。背景图像将不再与文档右侧对齐，它将被定位在距离左侧

像素处，其中

是视口的宽度

下面是一个简单的示例，用于隔离问题。“内容”一词应始终位于背景图像蓝色部分的顶部

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


身体{
保证金：0；
背景图像：url（数据：image/png；base64，…）；
背景位置：右上角；
背景重复：重复-y；
}
#内容{
宽度：900px；
高度：900px；
}
目录

您还可以看到WebKit bug报告中包含的

有什么想法吗？

使用绝对定位元素怎么样

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


身体{
保证金：0；
}
#背景{
背景图片：url（数据：image/png；base64，ivborw0kgoaaaansuheugaaavgaaacagmaaabqkamaaaaxnsr0iars4c6qaaalqtfrff5ev/9Pb/////kikacgaaafis0deaighughugaaajcehzcwacxmaaastaqcanbgaahdelqfcqfcqfsrrqoafulqvqy02pgwju4wqogokdukhy+acqykf2eyaaaelftqmucc）；
背景位置：右上角；
背景重复：重复-y；
位置：绝对位置；
右：0；
宽度：100%；
身高：100%；
z指数：-1；
}
#内容{
宽度：900px；
高度：900px；
}
目录

似乎对我来说是一个解决办法。

是的！这似乎是要走的路。唯一与滚动相关的问题：不是宽度：100%，而是宽度：760px（背景图像的宽度）。为了让背景图像垂直滚动，我必须包含一些Javascript。在这个简化的示例中，它工作得很好，在完全复杂的站点上，我的jQuery代码片段将在向下滚动图像时产生一些闪烁。到目前为止仍然是最好的解决方案，谢谢罗伊斯。