创建禁用不透明度引导程序 3？

Question

我正在使用引导程序 3，我需要在面板内部创建用户无法点击链接的不透明度，这是我的工作小提琴

http://jsfiddle.net/52VtD/9230/

问题是不透明度总是全屏我只需要在面板主体中？ 我需要只用 css 来做，这可能吗？

这是我目前的代码

<div class="panel panel-primary">
   <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
   </div>
   <div class="panel-body">
       <a href="#">I dont want allow user to clikc on this link</a>
   </div>
</div>

CSS

.panel-body:before{
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(0,0,0,0.8);
}

更新

我找到了更好的解决方案

.panel-body{
    opacity: .7;
    pointer-events: none;
}

Answer 1

我过去这样做的方法是让容器（即您想要放置透明盖的东西）具有position:relative，然后在该容器中创建一个divheight:100% 和@ 987654325@。然后，这涵盖了整个父 div。这是一个完整的工作示例。

HTML

<div class="container">
    <p>Ahoy, I'm some text</p>
    <p><a href="#">And I'm a link!</a></p>
    <img src="http://placehold.it/100" alt="I'm an image"/>

    <div class="cover"></div>

</div>

CSS

.container{
    position:relative;
    border:2px solid #663399;
    padding:5px;
}
.cover {
    background-color: #fff;
    height: 100%;
    left: 0;
    opacity: 0.9;
    position: absolute;
    top: 0;
    width: 100%;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); /*Yay for old IE support...*/
}

jsFiddle working example

只需使用半透明的 div 覆盖其中的元素即可立即使它们不可点击，因此无需乱用pointer-events，但它确实需要您有一个相对定位的容器 div。