框阴影在输入元素上消失

Box-shadow disappears over input elements

本文关键字：消失 元素 输入 阴影      更新时间：2023-09-26

我尝试在滚动时为div添加框影。我只是去尝试，一切都很好，除了框阴影不应用于文本区域或文本字段…我正在使用twitter-bootstrap这是我尝试过的…

 $('#target').scroll(function() {
  var scrollTop = $(this).scrollTop();
  if(scrollTop > 1) {
    if(!$(this).hasClass('scrolled')) {
      $(this).addClass('scrolled');
    }
  } else {
    $(this).removeClass('scrolled');
  }
});
http://jsfiddle.net/xVdYv/1/

请告诉我怎样才能克服这个缺点……

用这种方式修改你的CSS 

.scrolled:before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    z-index: 1;
    width: 100%;
    height: 50px;   
    pointer-events: none;
    box-shadow: inset 0px 20px 25px -20px #000000;
}

这将在具有z-index的定位伪元素中应用阴影:最终效果是阴影与窗体控件重叠

作为另一种解决方案，您可以简单地使用线性梯度作为.scrolled:before的背景

。

.scrolled:before {
    ...
    background: linear-gradient(to bottom, rgba(50,50,50, .25) 0, 
                                           rgba(50,50,50, 0) 50px);
}

正如Fabrizio所说的那样，伪元素将是添加此演示的一种方式。

我可能会选择这样的东西:http://jsfiddle.net/xVdYv/6/

.scrolled {
 position: relative;
}
.scrolled:before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    z-index:10;
    width: 100%;
    height:1px;
    box-shadow: 0px 0px 5px #000000;
}

不使用插入框阴影，只是设置一个1px的高度意味着你仍然可以与表单元素交互，而阴影是在它上面。否则50px的阴影会阻塞指针事件

如果你想在textarea和input上添加阴影，你需要告诉浏览器输入和textarea也需要一个阴影

.scrolled,.scrolled input,.scrolled textarea{
box-shadow: inset 0px 20px 25px -20px #000000;
}
相关文章：