我有一个奇怪的.我在我的网站上使用相同的代码,它可以在任何地方使用.出于某种原因,它根本不会在这里工作.
基本上我正在做的是通过使用伪元素创建半透明背景图像,:before并:after用背景颜色(:before)和半透明图像(:after)填充整个容器.该:before元素工作得很好,它填充了.dashboard-page预期的高度和宽度.该:after元件具有100%的宽度,但的高度为0,因此图像没有显示出来.非常感谢帮助.
.dashboard-page {
width: 100%;
position: relative;
z-index: 1;
@include clearfix;
&:before,
&:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
@include transition($transition-main);
}
&:before {
z-index: -2;
background-color: $blue-light;
}
&:after {
opacity: 0.02;
z-index: -1;
background-image: url('../life/assets/img/pattern.png');
}
}