Question

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

问题是不透明度总是全屏我需要只在面板体中吗？我只需要用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然后在容器内创建一个div使用height:100%和position:absolute。然后，这涵盖了整个父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。

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

1 个答案: