Question

Js Fiddle：https://jsfiddle.net/ed4qz4a7/1/

我的<div class="home" ><div/>高度为666px且我有2张图片，每张图片都包含高度666px，这意味着两张图片的高度为1332px 。我希望第二张图像隐藏在第一张图像下面。

我正在尝试

<section class="home">
  <ul>
    <li class="img1"></li>
    <li class="img2"></li>
  </ul>
</section>

CSS

 .home
 {
  height:666px;
  width:100%;
  overflow:hidden;
 }

Answer 1

您的代码正常运行，请参阅此处的演示：

<section class="home">
  <ul>
    <li class="img1"><img src="http://placehold.it/666x666"></li>
    <li class="img2"><img src="http://placehold.it/666x666"></li>
  </ul>
</section>

 .home
 {
  height:666px;
  width:100%;
  overflow:hidden;
 }

http://codepen.io/anon/pen/pjbQom

Answer 2

摘要

overflow属性指定是否剪切内容，渲染滚动条或仅在溢出其块级容器时显示内容。

使用具有与visible（默认值）不同的值的overflow属性将创建一个新的块格式化上下文。这在技术上是必要的 - 如果浮动与滚动元素相交，它将强制重新包装内容。每次滚动步骤后都会发生重绕，导致滚动体验缓慢。

为了使溢出属性生效， 块级容器必须具有边界高度（高度或最大高度）或将空白区域设置为nowrap < /强>

Initial value visible Applies to non-replaced block-level elements and non-replaced inline-block elements Inherited no Media visual Computed value as specified Animatable no Canonical order the unique non-ambiguous order defined by the formal grammar

语法

/* Content is not clipped */ overflow: visible; /* Content is clipped, with no scrollbars */ overflow: hidden; /* Content is clipped, with scrollbars */ overflow: scroll; /* Let the browser decide */ overflow: auto; /* Global values */ overflow: inherit; overflow: initial; overflow: unset;

值


<强>可见
    默认值。内容未被剪裁，可以在内容框外呈现。

<强>隐藏
  剪辑内容并且不提供滚动条。

<强>滚动
  内容被剪切，桌面浏览器使用滚动条，无论是否剪切任何内容。这避免了滚动条在动态环境中出现和消失的任何问题。打印机可能会打印溢出的内容。

自动
  取决于用户代理。如果内容溢出，Firefox等桌面浏览器会提供滚动条。

形式语法

visible | hidden | scroll | auto

实施例

方法01

p { width: 12em; height: 6em; border: dotted; overflow: visible; /* content is not clipped */ }

输出

方法02

p { overflow: hidden; /* no scrollbars are provided */ }

输出

方法03

p { overflow: scroll; /* always show scrollbars */ }

输出

方法04

p { overflow: auto; /* append scrollbars if necessary */ }

输出

一些相关属性

text-overflow

white-space

overflow-x

overflow-y

clip

display

Answer 3

使用此

 *
    {
        margin:0;
        padding:0;
    }

    .home
    {
      min-height: 666px;
      max-width: 100%;
    }

        ul
        {
            position:absolute:
            list-style:none;
        }

        li
        {
          position: relative;
          float:left;
          width:100%;
          height:100%;
          background-size:cover;
          background-repeat: no-repeat;
          background-position: center center;
        }

    .img1
    {
      height: 666px;
      width: 100%;
      background-image: url('http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg');

    }
    .img2
    {
      background-image: url('http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg');
      display: none;
    }

Answer 4

为了隐藏＆＃39;在另一个背后的图像，你想要将它们的位置设置为绝对。

<section class="home">
  <ul>
    <li class="img1"><img src="http://placehold.it/666x666"></li>
    <li class="img2"><img src="http://placehold.it/666x666"></li>
  </ul>
</section>

ul{
  display: inline;
}

li{
  position: absolute;
}

如果您愿意，可以修复.home容器的宽度和高度，但为了方法的清晰，我将其从示例中删除了。

如何使用溢出属性

4 个答案:

摘要

语法

值

形式语法

实施例