初学CSS,在写logo图片背景加链接的时候发现下面2种代码都可以实现,哪种更合适一些呢?
第一个是这样写:
logo {
float: left;
width: 160px;
height: 50px;
background-image: url(./images/logo.@1x.png);
background-image: -webkit-image-set(
url(./images/logo.@1x.png) 1x,
url(./images/logo.@2x.png) 2x);
}
logo a {
display: block;
width: 160px;
height: 50px;
text-indent: -9999em;
}
第二个是这样写:
logo {
float: left;
}
logo a {
display: block;
width: 160px;
height: 50px;
background-image: url(./images/logo.@1x.png);
background-image: -webkit-image-set(
url(./images/logo.@1x.png) 1x,
url(./images/logo.@2x.png) 2x);
text-indent: -9999em;
}
谢谢,请指教。
问题解决的方法本来就有多种,只要没带来新的问题,个人觉得都是可以的。至于好坏之分,可以从拓展性、代码简洁性等因素上来考虑。比如你这个如果要求鼠标滑过的时候,背景图片有变化,或者需要个什么效果,这时就最好采用下面这种写法。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。