无法让 CSS 层高于“不透明”层答案

【问题标题】：Can't get CSS layer to rise above "opacitied" layer无法让 CSS 层高于“不透明”层
【发布时间】：2015-10-05 03:24:42
【问题描述】：

是的，我知道这不是一个词，但我的大脑现在正在超速运转，我的一天快结束了。

这是代码笔：http://codepen.io/anon/pen/mJKgwd

HTML：

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-4 col-lg-3 thumb">
      <div class="thumbnail-bg">
        <a class="thumbnail client-blah1" href="#">
          <div class="client-title glyphicon glyphicon-zoom-in"></div>
          <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="680px" height="510px" id="blah1-ph" class="img-responsive"></svg>
        </a>
      </div>
    </div>
    <div class="col-xs-12 col-md-4 col-lg-3 thumb">
      <div class="thumbnail-bg">
        <a class="thumbnail client-blah1" href="#">
          <div class="client-title glyphicon glyphicon-zoom-in"></div>
          <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="680px" height="510px" id="blah2-ph" class="img-responsive"></svg>
        </a>
  </div>
    </div>
    <div class="col-xs-12 col-md-4 col-lg-3 thumb">
      <div class="thumbnail-bg">
        <a class="thumbnail client-blah1" href="#">
          <div class="client-title glyphicon glyphicon-zoom-in"></div>
          <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="680px" height="510px" id="blah3-ph" class="img-responsive"></svg>
        </a>
      </div>
    </div>
    <div class="col-xs-12 col-md-4 col-lg-3 thumb">
      <div class="thumbnail-bg">
        <a class="thumbnail client-blah1" href="#">
          <div class="client-title glyphicon glyphicon-zoom-in"></div>
          <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="680px" height="510px" id="blah4-ph" class="img-responsive"></svg>
        </a>
      </div>
    </div>
    <div class="col-xs-12 col-md-4 col-lg-3 thumb">
      <div class="thumbnail-bg">
        <a class="thumbnail client-blah1" href="#">
          <div class="client-title glyphicon glyphicon-zoom-in"></div>
          <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="680px" height="510px" id="blah5-ph" class="img-responsive"></svg>
        </a>
      </div>
    </div>
  </div>
</div>

CSS：

.thumb {
    transform: translateZ(0);
    margin-bottom: 30px;
    position: relative;
}
.thumbnail-bg {
    background-color: rgba(34, 34, 34, 1.0);
}
.thumbnail {
    border-radius: 0;
    border: 0 !important;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    width: 100%;
    max-height: 300px;
    overflow: hidden;
    transition: opacity 1s ease;
}
.thumbnail:hover {
  opacity: 0.2;
}
.thumbnail:hover .client-title {
  display: block;
}
.client-title {
    width: 100%;
    text-align: center;
    font-size: 5em;
    text-shadow: 1px 1px 0 rgb(34, 34, 34), 0 0 0 rgb(34, 34, 34), 1px 1px 8px rgb(34, 34, 34);
    display: none;
    position: absolute;
    top: 50%;
    left: 0;
    color: rgb(231, 231, 231);
    transform: translateY(-50%);
}

@media screen and (min-width: 992px) {
  .thumbnail {
    max-height: 200px;
  }
}

.client-blah1 { background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97300&w=300&h=300'); }

除了让重叠的字形图标在悬停时显示在不透明度层“上方”之外，一切都有效。

我尝试了许多不同的方法，包括玩 z-index、在代码周围物理移动 div 元素（即在子元素之外设置为低不透明度以允许 BG 颜色通过）。

我不太确定从这里到哪里去，代码是直接从实际站点代码中摘录的，所以我知道这不是代码库中其他地方的环境/其他问题，因为在 codepen 中也会发生同样的事情。

我确信这是我所俯瞰的简单而基本的东西，但我想我不能像他们所说的那样从树上看到森林。

任何帮助将不胜感激，在此先感谢。

PS 我不想只默认使用基于 jQuery 的解决方案，CSS 已经达到 99.9%。

【问题讨论】：

标签： css twitter-bootstrap z-index opacity

【解决方案1】：

您需要在缩略图类上使用带有 rgba 的背景颜色。这样 css 只会改变背景的不透明度/alpha，而不是像不透明度那样改变整个容器。

.thumb {
    transform: translateZ(0);
    margin-bottom: 30px;
    position: relative;
}
.thumbnail-bg {
    background-color: rgba(34, 34, 34, 1.0);
}
.thumbnail {
    border-radius: 0;
    border: 0 !important;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    width: 100%;
    max-height: 300px;
    overflow: hidden;
    transition: background-color 1s ease;
}
.thumbnail:hover {
  background-color: rgba(99,99,99, 0.2)
}
.thumbnail:hover .client-title {
  display: block;
}
.client-title {
    width: 100%;
    text-align: center;
    font-size: 5em;
    text-shadow: 1px 1px 0 rgb(34, 34, 34), 0 0 0 rgb(34, 34, 34), 1px 1px 8px rgb(34, 34, 34);
    display: none;
    position: absolute;
    top: 50%;
    left: 0;
    color: rgb(231, 231, 231);
    transform: translateY(-50%);
}

@media screen and (min-width: 992px) {
  .thumbnail {
    max-height: 200px;
  }
}

.client-blah1 { background-color: rgba(99,99,99,1) }

【讨论】：

虽然这是不正确的，但它确实让我走上了正确的道路。我只是没有从正确的角度来看待它。更新代码笔：codepen.io/anon/pen/gpKJoG
@GabrialMacLeod 我同意。发布此消息后，我意识到现在您没有图像。

【解决方案2】：

这是一个快速的解决方案。试一试：

.thumbnail {
    border-radius: 0;
    border: 0 !important;
    color: #ddd;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    width: 100%;
    max-height: 300px;
    overflow: hidden;
}
.thumbnail:hover {
    -webkit-box-shadow: inset 0 0 1000px rgba(0,0,0,0.5);
       -moz-box-shadow: inset 0 0 1000px rgba(0,0,0,0.5);
            box-shadow: inset 0 0 1000px rgba(0,0,0,0.5);
}

用上面的 CSS 替换你的 .thumbnail 和 .thumbnail:hover CSS，看看会发生什么。

你的字形放大项目保持白色，这是理想的。

【讨论】：

【解决方案3】：

原来我只是从错误的方向去。

更新的 Codepen：http://codepen.io/anon/pen/gpKJoG

fin

【讨论】：