Question

我有一个从右到左动画的图像......图像宽度为6000像素，可以为动画提供更长的持续时间。我将图像（clouds-layer-2.png）放在div（第2层容器）中并使用以下CSS希望图像不会溢出div创建水平滚动。但不幸的是它不起作用，我有6000px的水平滚动。

.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;
}

感谢您提供任何帮助。

Answer 1

本着Stack Overflow的精神，我正在回答你的问题。

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

我想强调的是，这个网站真的很重，你应该对它进行编码，以便在移动设备上不会出现负载问题。您可以将云分成两半，和/或使用SVG（M也应该是SVG）。此外，如果您决定在侧面添加内容，您的云将会重叠内容，因此您可能需要设置边框半径以使圆圈从云中裁剪出来。

只是建议，但希望他们帮忙！

图像溢出div

1 个答案: