javascript - 链接和悬停在超大屏幕中不起作用

Question

我正在使用 bootstrap 框架，我想要实现的是使用以下代码将背景图像放在渐变上:

jumbotron{
  position: relative;
  padding: 60px 30px;
  margin-bottom: 30px;
  color: #FFF;
  text-align: center;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4), 0px 0px 30px rgba(0, 0, 0, 0.075);
  background: linear-gradient(45deg, #020031 0%, #6D3353 100%) repeat scroll 0% 0% transparent;
  box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.2) inset, 0px -3px 7px rgba(0, 0, 0, 0.2) inset;
  }   

.jumbotron:after{
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: url('css/bs-docs-masthead-pattern.png') repeat scroll center center transparent;
  opacity: 0.4;
  }

我面临的问题是，当我在 jumbotron:after 中使用 position: absolute 属性时，所有 link 和 hover(但是我得到一个渐变图像)属性不复存在。当我不使用它时，我看不到图像(但链接和悬停属性有效)。 有什么办法可以同时获得这两个东西而不会弄乱布局？

Answer 1

与其使用 :after 伪元素进行叠加，不如尝试在 jumbotron 本身上设置两个渐变:

.jumbotron {
    position: relative;
    padding: 60px 30px;
    margin-bottom: 30px;
    color: #FFF;
    text-align: center;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4), 0px 0px 30px rgba(0, 0, 0, 0.075);
    background: 
        url('css/bs-docs-masthead-pattern.png') repeat scroll center center,
        linear-gradient(45deg, #020031 0%, #6D3353 100%) repeat scroll 0% 0% transparent;
    box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.2) inset, 0px -3px 7px rgba(0, 0, 0, 0.2) inset;
}

演示:http://plnkr.co/edit/Z64z6U28fff8jDEB3xgn?p=preview