可以用CSS3解决背景图片加载失败启用默认背景吗

html-css014

可以用CSS3解决背景图片加载失败启用默认背景吗,第1张

1、因为背景图片都是写在CSS中，但是不能确保服务器上一定有这张图片，所以就必须在当前背景图片缺省的情况下启用默认背景。

2、背景图片图层的背景都是透明的，所以之前采用多背景来做的时候发现上面的图片无法完全覆盖遮罩下面的图片！

3、应该说是可以的。

①：用css3rotate旋转的话，可以随时修改动画的背景色和旋转速度等，而gif只能重新修改图片再导出，但是有个缺点就是只有safari可以很好地支持，chrome下支持不是很好；

②：在比较复杂的动画，css3rotate需要通过控制多张图片，此时的代码量会很大，而是用gif图的话则不需要过多的代码；

③：在兼容性方面：css3只有高级版本的浏览器才兼容，而gif几乎所有浏览器都能够兼容。

这个简单,先讲一下原理

先设置图片垂直水平居中(position：absolute与translate3d 相结合)    class为img

2.可以编写自定义animation    0的时候width为0，100%的时候width为你想要的宽度,高一样，其他的改设置的都设置一下  class为img active(这里是两个class) 来使用这个animation

3.在window.onload的事件下执行   只需给  img再加一个active的class就ok了

注意：我之前有在写自定义动画的时候在微信端执行不了动画，之后找到原因，给animation加一个延迟  100ms就行了   如果你遇到这种问题可以试试。