Question

我想定位一个圆形背景图像/圆形图像，使其按照以下jsfiddle显示：

但我不想使用

<div id="outer-container">

目前正在使用。

然后，当浏览器水平缩小时，只小于div的宽度

<div id="container">

然后应该引入滚动条并向右滚动到右边意味着当前只能看到该图像的一半。

只有在浏览器窗口再次水平展开时，才能看到容器外的另一半。

我理想情况下只想在身体上添加一个背景图像，但我不确定是否可以这样做并给它一个相对于容器的位置，这样无论浏览器窗口有多宽，它仍处于完全相同的位置。

我还考虑过根据以下jsfiddle在标题中添加一个绝对定位的div：

http://jsfiddle.net/nfa8q40s/1/

然而，问题在于，当浏览器窗口水平缩小并引入水平滚动条时，如果向右滚动，新添加的div将添加到页面的可滚动宽度。

我希望滚动停在容器的边缘，以便只显示圆圈的一半。

非常感谢任何帮助。

感谢您的时间和帮助。

Answer 1

JavaScript的可能解决方案：

$( window ).scroll(function() {
  $('#image').css('left', $(this).scrollLeft() +'px');
});

#image {
    background-image: url('http://www.w3schools.com/images/compatible_firefox.gif');
   position:absolute;
   width:60px;
   height:60px;
   z-index:-1;
   background-attachment: scroll;
   background-position: 20px 20px; 
   background-repeat: no-repeat;
} 
#container {
    width:1000px;
    height:1000px;
    background:transparent
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id=container>
    <div id=image></div>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</div>

当浏览器窗口水平缩小时，不会水平移动的正文背景图像

1 个答案: