任务八部分background问题
来源：9-10 制作3D旋转导航综合练习题
绝尘kinoko
2019-04-18 16:47
/*任务八、设置导航当前状态与悬浮状态下的背景效果*/
.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回答
-
- keydew
- 2019-04-28 16:14:37
这里作者可能原本是想在背景上叠加两个渐变（尽管两个渐变语句是一样的），因为一个linear-gradient渐变就相当于是一张不同的背景图片，所以在background-position里要分别对这两个图片设置起始位置。
但是因为题目代码里background-size: 5px 5px和background-position: 0 0, 30px 30px值的关系，这两个渐变最终重合在一起了（因为30px是5px的倍数），形成的图片效果就是下图单元缩小后repeat覆盖整个span后的效果：
这是渐变图（放大版）
这是很多个渐变图repeat覆盖效果但是如果把background-size或background-position的值调整一下，譬如：background-size: 20px 20px。这样两个渐变就不会重合在一起，就会形成马赛克一样的图案：
上图效果每个小格尺寸为10px。
希望能有些帮助吧
十天精通CSS3
本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备
242554 学习 · 2623 问题
相似问题