为了账号安全,请及时绑定邮箱和手机立即绑定

任务八部分background问题

/*任务八、设置导航当前状态与悬浮状态下的背景效果*/
.nav-menu li .active .front,
.nav-menu li .active .back,
.nav-menu li a:hover .front,
.nav-menu li a:hover .back {
    background-color: #51938f;
    background-size: 5px 5px;
    background-position: 0 0, 30px 30px;
    background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
    background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
    background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
    background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
}

color和size都只有一份,为什么position和image(颜色渐变)这就成两份了?而且渐变的两部分是完全一样的(不考虑前缀的话)。

正在回答

1 回答

这里作者可能原本是想在背景上叠加两个渐变(尽管两个渐变语句是一样的),因为一个linear-gradient渐变就相当于是一张不同的背景图片,所以在background-position里要分别对这两个图片设置起始位置。

但是因为题目代码里background-size: 5px 5px和background-position: 0 0, 30px 30px值的关系,这两个渐变最终重合在一起了(因为30px是5px的倍数),形成的图片效果就是下图单元缩小后repeat覆盖整个span后的效果:

https://img1.sycdn.imooc.com//5cc55e9b000123d802000200.jpg这是渐变图(放大版)

https://img1.sycdn.imooc.com//5cc55f6c000128c302000200.jpg这是很多个渐变图repeat覆盖效果

但是如果把background-size或background-position的值调整一下,譬如:background-size: 20px 20px。这样两个渐变就不会重合在一起,就会形成马赛克一样的图案:

https://img1.sycdn.imooc.com//5cc55fbb0001cd5202010200.jpg

上图效果每个小格尺寸为10px。

希望能有些帮助吧

1 回复 有任何疑惑可以回复我~
#1

绝尘kinoko 提问者

thx,这个马赛克效果有点神奇,斜向线性渐变通过平移覆盖竟然可以变成横向的
2019-04-30 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

任务八部分background问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信