我正在使用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;
}
我面临的问题是，当我在position: absolute中使用jumbotron:after属性时，所有链接并悬停（但我获得了渐变图像）属性停止存在。当我不使用它时，我没有得到图像（但链接和悬停属性工作）。
有没有什么方法可以同时获得这两件事情而不会弄乱布局？
答案 0 :(得分：0)
尝试在jumbotron本身上设置两个渐变，而不是使用:after伪元素进行叠加：
.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;
}