CSS 叠加问题

Question

我有一些图像缩略图，悬停时，我希望标题显示在覆盖缩略图宽度和高度的透明黑色 <div> 覆盖层之上。

我分别使用 display: table 和 display: table-cell;（以允许垂直中间定位）。

但是，每次我尝试这样做时，叠加层 <div> 都只是一个小条，而不是覆盖整个 <div>。

我已经尝试添加填充和边距，但仍然无法获得我想要的行为。

http://jsfiddle.net/jameshenry/t92qukz8/2/

CSS:

.griditem {
    position: relative;
    background-color: #777;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    width: 50%;
    overflow: hidden;
}

.titles {
    position: absolute;
    display: table;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    opacity:0;
    -webkit-transition: opacity .5s ease;
    -moz-transition: opacity .25s ease;
    background: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    text-decoration: none;
    z-index: 999;
}

.titles p {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
}

.griditem:hover .titles {
    text-decoration: none;
    opacity:1;
}


h5 {
    font-family: Helvetica Neue;
    font-size: 5em;
    color: #FFFFFF;
    padding-bottom:0;
    margin-bottom:-30px;
}

h6 {
    padding-top: 0;
}
}

和HTML

<div class="griditem" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/8/80/Aspect_ratio_-_16x9.svg); background-size:100% 100%;">
<img src="http://i.imgur.com/JnW9SPx.png" width="100%" alt="Spacer 16x9" />
    <a href="http://www.google.com" class="titles">
     <p>BIG TEXT<br>
        small Title<p>
    </a>
</div>

如何改变我的 css/html 以获得我想要的行为？

Answer 1

您可以像这样使用一些 jquery 轻松解决此问题。可以找到Demo here.

var pheight = $(".griditem").height();
$(".titles p").css("height", pheight);

$(window).resize(function () {
    var pheight = $(".griditem").height();
    $(".titles p").css("height", pheight);
});

Answer 2

为了让 table 占据 100% 的高度，它需要有一个高度上下文来引用（因为没有父级设置为任何 'height'，它会崩溃）。您的问题可以通过向设置该上下文的 table 添加一个包装器，并将 height:100%; 添加到您的 display:table; 元素来解决。

.griditem {
    position: relative;
    background-color: #777;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    width: 50%;
    overflow: hidden;
}
/*added overlay CSS*/
.overlay {
    
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;

    width: 100%;
    height: 100%;
}

.titles {
    display: table;
    width: 100%;
    height: 100%; /*important, forces to 100% height of parent*/
    opacity:0;
    -webkit-transition: opacity .5s ease;
    -moz-transition: opacity .25s ease;
    background: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    text-decoration: none;
    z-index: 999;
}

.titles p {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
}

.griditem:hover .titles {
    text-decoration: none;
    opacity:1;
}


h5 {
    font-family: Helvetica Neue;
    font-size: 5em;
    color: #FFFFFF;
    padding-bottom:0;
    margin-bottom:-30px;
}

h6 {
    padding-top: 0;
}

<div class="griditem" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/8/80/Aspect_ratio_-_16x9.svg); background-size:100% 100%;">
<img src="http://i.imgur.com/JnW9SPx.png" width="100%" alt="Spacer 16x9" />

  <div class="overlay">
  
      <a href="http://www.google.com" class="titles">
       <p>BIG TEXT<br>
        small Title<p>
      </a>

  </div>

</div>

CSS 叠加问题

CSS Overlay woes

html

css

overlay