正在回答
background是复合属性的简写方式，会覆盖前面的背景样式的设置，所以第三个background-size没有生效；第四个background-color没有生效。
HTML部分：
<body>
<div></div>
</body>
CSS部分（4种情况，1和2效果一样，3和4效果不一样）
1.
div{
width: 400px; height: 400px; background-color:yellow;
background-size:100px 100px;
background-image:
linear-gradient(45deg,purple 25%,transparent 25%), linear-gradient(135deg,purple 25%,transparent 25%), linear-gradient(225deg,purple 25%,transparent 25%), linear-gradient(315deg,purple 25%,transparent 25%);
}
2.
div{
width: 400px; height: 400px; background-color:yellow;
background-image:
linear-gradient(45deg,purple 25%,transparent 25%), linear-gradient(135deg,purple 25%,transparent 25%), linear-gradient(225deg,purple 25%,transparent 25%), linear-gradient(315deg,purple 25%,transparent 25%);
background-size:100px 100px;
}
3.
div{
width: 400px; height: 400px; background-color:yellow;
background-size:100px 100px;
background:
linear-gradient(45deg,purple 25%,transparent 25%), linear-gradient(135deg,purple 25%,transparent 25%), linear-gradient(225deg,purple 25%,transparent 25%), linear-gradient(315deg,purple 25%,transparent 25%);
}
4.
div{
width: 400px; height: 400px; background-color:yellow;
background:
linear-gradient(45deg,purple 25%,transparent 25%), linear-gradient(135deg,purple 25%,transparent 25%), linear-gradient(225deg,purple 25%,transparent 25%), linear-gradient(315deg,purple 25%,transparent 25%);
background-size:100px 100px;
}
HTML部分：
<body>
<div></div>
</body>
CSS部分（4种情况，1和2效果一样，3和4效果不一样）
1.
div{
width: 400px; height: 400px; background-color:yellow;
background-size:100px 100px;
background-image:
linear-gradient(45deg,purple 25%,transparent 25%), linear-gradient(135deg,purple 25%,transparent 25%), linear-gradient(225deg,purple 25%,transparent 25%), linear-gradient(315deg,purple 25%,transparent 25%);
}
2.
div{
width: 400px; height: 400px; background-color:yellow;
background-image:
linear-gradient(45deg,purple 25%,transparent 25%), linear-gradient(135deg,purple 25%,transparent 25%), linear-gradient(225deg,purple 25%,transparent 25%), linear-gradient(315deg,purple 25%,transparent 25%);
background-size:100px 100px;
}
3.
div{
width: 400px; height: 400px; background-color:yellow;
background-size:100px 100px;
background:
linear-gradient(45deg,purple 25%,transparent 25%), linear-gradient(135deg,purple 25%,transparent 25%), linear-gradient(225deg,purple 25%,transparent 25%), linear-gradient(315deg,purple 25%,transparent 25%);
}
4.
div{
width: 400px; height: 400px; background-color:yellow;
background:
linear-gradient(45deg,purple 25%,transparent 25%), linear-gradient(135deg,purple 25%,transparent 25%), linear-gradient(225deg,purple 25%,transparent 25%), linear-gradient(315deg,purple 25%,transparent 25%);
background-size:100px 100px;
}
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星