我正在尝试创建一个背景,其中相同的渐变从上到下重复,然后从下到上重复,就像这样:
我正在使用gradient generator并考虑Compass @include背景以包含两个渐变,但我无法使其工作,我只看到第一个渐变(从上到下)。
到目前为止我的代码是:
@include background(
linear-gradient(top, #f1693c 0,#f1693c 80px,#f37744 81px,#f37744 122px,#f4824a 123px,#f4824a 163px,#f68d50 164px,#f68d50 50%) no-repeat center top,
linear-gradient(top, #f1693c 0,#f1693c 80px,#f37744 81px,#f37744 122px,#f4824a 123px,#f4824a 163px,#f68d50 164px,#f68d50 50%) no-repeat center bottom);
如何包含两个渐变,一个与顶部对齐,另一个与底部对齐?
答案 0 :(得分:0)
我不知道Compass,所以我可以帮助你使用Compass语法,但CSS应该是
div {
width: 300px;
height: 300px;
border: solid 1px black;
}
.test {
background: linear-gradient(180deg, #f1693c 0,#f1693c 80px,#f37744 81px,#f37744 122px,#f4824a 123px,#f4824a 163px,#f68d50 164px,#f68d50 50%) top center / 100% 50% no-repeat,
linear-gradient(0deg, #f1693c 0,#f1693c 80px,#f37744 81px,#f37744 122px,#f4824a 123px,#f4824a 163px,#f68d50 164px,#f68d50 50%) center bottom / 100% 50% no-repeat;
}
<div class="test"></div>
您需要添加100%50%的大小。如果你不这样做,每张图片都会占据所有空间,而你只看到最顶层的