我有一个从右到左动画的图像...该图像的宽度为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/