项目初期头部有一张提示性的图片,当时就以背景的形式插入,也没考虑兼容性问题,后来评审项目之后看了整个项目的兼容才发现这个图片的问题,IE下就是这样的,没有显示,其他浏览器均正常显示
看了一些资料,就是复合属性的问题,如下:
.titleImg {
height: 70px;
background-image: url("../assets/image/bg.png") 0 0 no-repeat;
}
那么解决办法就是把复合属性分开来写:
.titleImg {
height: 70px;
background-image: url("../assets/image/bg.png");
background-repeat: no-repeat;
}
果然图片出来了:
然而,当你高兴的时候,那么还有影藏的问题,试着去窥探它的自适应,妈呀,这不是找茬吗:
这变形变得感觉给图片的的字体做了瘦身手术一样,前提是我加了下面这属性,不加的话图片和木乃伊一样:
background-size:100% 100%;
然后又是一顿解决:
.titleImg {
height: 70px;
background-image: url("../assets/image/bg.png");
background-repeat: no-repeat;
background-size:cover;
background-position: 55%;
}
关于cover菜鸟给出的解释是这样:
当然还有一个background-position属性,字面理解就是背景定位,可能有人有疑问,这与自适应有什么关系?简单点说,就是利用它来裁剪多余的部分,达到图片不变形的问题,至于这个属性的具体含义,我这里就不贴出来解释了,可以自行去深入了解一下。最后还是多说一句,css并不简单!水很深!希望看后能解决你的问题!