代码如下：
CSS
.test1 {
display: none;
/*visibility: hidden;*/
}
.test2 {
background-image: url('test.jpg');
}
HTML
<div class="test1">
<div class="test2"></div>
</div>Result
1.代码执行时，监测网络却发现test.jpg没有被下载？
2.而把display: none;换成visibility: hidden;之后,test.jpg被下载了QA
1. display: none;和visibility: hidden;的区别是什么?
2.尤其是在不同情景下使用中的区别（如上示例），请尽可能的举例说明。
写回答
个人理解的是当display：none的时候，dom会并不对div进行渲染，所以css里的背景图片没有加载，但而显示的时候，浏览器全新解析渲染，而这时会读取css里的背景图片。
另外对于display为none的时候，当前区域会消息，不占用位置，而visibility为hiden的时候，会占用位置，但内容不显示.
不清楚理解的对不对？
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
