Question

我有包含图片，标题和日期的新闻列表。我想缩放我能够的图像，但它隐藏了具有标题的跨度。

我使用-moz-transform-style: preserve-3d;为Firefox修复了此问题，但在其他浏览器中，我无法找到可与IE，Chrome，Safari等其他浏览器配合使用的CSS属性。

.list-w li {

    overflow:hidden;
    display: block;
    float: left;
    margin-bottom: 20px;
    margin-right: 15px;
    width: 315px;

}
    .list-w li img:hover {
      border: 0 none;
      float: left;
      margin: 0;
      width: 315px !important;
      transform: scale(1.05);
      z-index:10;
    }
    .title-span {
      -moz-transform-style: preserve-3d;
      z-index:100;
      color: #000;
      display: inline-block;
      float: left;
      font-size: 11px;
      font-weight: bold;
      height: 14px;
      margin: -24px 0 0;
      overflow: hidden;
      padding: 5px;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 305px;
    }

HTML

<div class="list-w">
  <ul>

    <li>
      <a style="text-decoration:none; border:0; display:block;" href="/en/" id="hylTopFour2_0">
        <img src=" http://placehold.it/350x150">
        <span class="title-span">This is the title of the news</span>
      </a>
    </li>
  </ul>
</div>

Answer 1

只需将position: relative添加到.title-span类

即可

Codepen demo

注意：

1）transform-style: preserve-3d;此处不是必需的，不是问题

2）这里真正的问题是span元素的上边距为负，并且在图像下面。这是由于关于非定位元素的堆叠规则（{{ 3}}）

在这种情况下，因为内联级元素（此处的图片）被绘制为 非内联级元素（这里的跨度）

（有关详情，请参阅spec）

3）在position: relative上设置span会使其显示在图片顶部，因为定位元素被涂在上方 内联级别，非定位元素

＆＃13;

.list-w li {
  overflow: hidden;
  display: block;
  float: left;
  margin-bottom: 20px;
  margin-right: 15px;
  width: 315px;
}
.list-w li img:hover {
  border: 0 none;
  float: left;
  margin: 0;
  width: 315px !important;
  transform: scale(1.05);
  z-index: 10;
}
.title-span {
  -moz-transform-style: preserve-3d;
  z-index: 100;
  color: #000;
  display: inline-block;
  float: left;
  font-size: 11px;
  font-weight: bold;
  height: 14px;
  margin: -24px 0 0;
  position: relative;
  overflow: hidden;
  padding: 5px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 305px;
}

＆＃13;

<div class="list-w">
  <ul>

    <li>
      <a style="text-decoration:none; border:0; display:block;" href="/en/" id="hylTopFour2_0">
        <img src=" http://placehold.it/350x150">
        <span class="title-span">This is the title of the news</span>
      </a>
    </li>


  </ul>
</div>

＆＃13;

缩放图像时保留跨度

1 个答案:

Codepen demo