CSS-自定义高度的元素背景图如何自适应以及after伪元素在ie下的处理

我都好久没更新了！

遇到一个效果，之前没有考虑清楚，设置了固定高度，到了后边，产品要加长，我就觉得设计得从新弄张长点的背景图！这不多余么？

其实分析原图还是可以再切分，再细化到不用改设计图，让我们前端页面各种适应，做到重复利用。

于是就有了这个问题和如下的一连串问题。

.最外层父元素{height:auto;background:url(../images/hot_c_bg_g.png) repeat-y center top  #2807b3;}

一定是y轴重复

本来想用css3的background-image属性的多个背景图的功能，可是想想还要兼容ie就很烦

于是利用了css的伪类选择器来完成这一巨大的使命。

.hotCar{background:url(../images/hot_c_bg_g.png) repeat-y center top  #2807b3;position: relative;}

然后是顶部和底部的图：

.hotCar:before{position: absolute;top: 0; left: 0;content: "";display: block;width: 100%;height: 184px;background: url(../images/hot_h_bg_g.jpg) no-repeat top center;}

.hotCar:after{content: "";display: block;height: 64px;background: url(../images/hot_f_bg_g.jpg) no-repeat bottom center;}

这样设置，别的浏览器都可以了，到了ie还是这个样子，只有第一张图重复了。

可以看出来，before和after的背景图片没有加载进来，或者可以说，在ie（以下皆指ie8及以下）中，before和after没起作用。

 

按理说不应该啊，before你不支持,after你得管啊，要不然清除浮动是有会没用的啊。

我想了想，清除浮动时，虽然也用了after伪类，但他在正常的clearfix类里边还设置了*zoom：1；*overflow:hidden;这个万能的iebug调试法，我这里也试下看行不？

结果还是，不行！

这种关键时刻，iebugbar软件不能用了，更加测不出问题了。开发人员工具也打不开，打开了是透明的.

百度了下，找到了解决方法，下面是原文摘录：

　　“按下F12之后，开发人员工具在桌面上看不到，但是任务栏里有显示。将鼠标放在任务栏的开发人员工具上，出现一片透明的区域，选中之后却出不来。将鼠标移动到开发人员工具的缩略图上，右键-最大化，工具就全屏出现了。（或者是右键-移动，然后手动调整窗口大小）

但是这时候是单独一个窗口，没有和IE页面结合在一起。点击右上角的固定按钮（快捷键CTRL+P），就和IE结合在一起了，位于页面的下方。

或者是打开工具后，直接按快捷键ctrl+p，就出来了。（当然了，必须先打开开发工具，否则ctrl+p是IE8的打印）。

有了开发人员工具，我就可以调节以下ie的浏览模式，换成ie8文本模式，居然可以了！

后来考虑到content不能为空，但我又不需要内部的文字，于是就用了一个color等于背景色，算是障眼法把。

这算其中一个解决方法，另外css3的多层背景图的方法可以按照w3c文档一步一步来。

第三种解决方法，是给结构加空节点，然后给背景图，通过调试也可以实现。就不多话。

但我觉得最好的方法还是用css好，不过针对ie下伪类不能用的问题，网上还是有很多教程说明，让引入js文件来解决的。

.class{background:url(../images/hot_c_bg_g.png) repeat-y center top  #2807b3;position: relative;*zoom:1;*overflow: hidden;}
.class:before{position: absolute;top: 0; left: 0;display: block;width: 100%;height: 184px;content: "1";color: #2807b3;background: url(../images/hot_h_bg_g.jpg) no-repeat top center;}
.class:after{content: "1";color: #2807b3;display: block;height: 64px;width: 100%;background: url(../images/hot_f_bg_g.jpg) no-repeat bottom center;}

ps:高度的设置是图片的高度

 

-------------------------------------------------------------------------------------正经分割线！！！--------------------------------------------------------------------------------------------------------------------------
声明：
　　请尊重博客园原创精神，转载或使用图片请注明：
　　博主：xing.org1^
　　出处：http://www.cnblogs.com/padding1015/