我有一个从右到左动画的图像...该图像的宽度为6000px,可以为动画提供更长的持续时间。我将图像(clouds-layer-2.png)放在div(layer-2-container)中,并使用以下CSS希望图像不会溢出到div上,从而创建水平滚动。但不幸的是,它无法正常工作,并且我拥有价值6000像素的水平滚动。

.layer-2-container {
width: auto;
overflow-y: scroll;
overflow-x: hidden;
z-index: 2;
}


可以在http://www.mike-griffin.com/testing查看。如果使用CMD / CTRL + A选择所有选项,则可以更好地看到云。

我还将在下面粘贴所有代码。

-HTML-
    

    <section class="home-section">

    <div class="navigation">
    <nav>
    <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    </ul>
    </nav>
    </div><!--navigation-->

    <div class="creative-designer">
    <h2>| Heading one |</h2>
    </div>

    <div class="home-section-layers">

    <img class="layer-1" src="img/white-M-layer-3.jpg" width="" height="">

    <div class="layer-2-container">
    <img class="layer-2" src="img/clouds-layer-2.png" width="" height="">
    </div><!--layer-2-container-->
    </div><!--home-section-layers-->

    </section><!--home-section-->


    </div><!--container-->


-CSS-

.container {
width: 100%;
height: auto;
max-width: 100%;
}

.home-section {
width: 100%;
height: auto;
position: absolute;
}

.layer-1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
/*margin-top: -10%;*/
z-index: 1;

}

.layer-2-container {
width: auto;
overflow-y: scroll;
overflow-x: hidden;
z-index: 2;
}

.layer-2 {
position: absolute;
z-index: 2;
width: auto;
height: auto;
top: 0;
}

.creative-designer {
text-align: center;
position: relative;
z-index: 5;
color: #666;
margin-top: 40%;
}

.navigation {
color: #0C98D6;
position: relative;
z-index: 10;
top: 0px;
}

.navigation ul {
list-style: none;
width: 100%;
padding-right: 5%;
float: right;
}

.navigation ul li {
float: right;
padding: 10px;
}


谢谢您的帮助。

最佳答案

本着堆栈溢出的精神,我正在回答您的问题。

.home-section {
  overflow-x: hidden;
}


不过,我想强调的是,这个网站真的很重,您应该对其进行编码,以免移动设备上出现负载问题。您可以将云分成两半,和/或使用SVG(M也应为SVG)。此外,如果您决定在侧面添加内容,则云将重叠内容,因此您可能需要设置边界半径以使圆裁剪出云。

只是建议,但希望它们能对您有所帮助!

关于html - 图像溢出到div外,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22431478/

10-11 23:28
查看更多