开发者社区> 鋒o丫头> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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文件来解决的。

1 .class{background:url(../images/hot_c_bg_g.png) repeat-y center top  #2807b3;position: relative;*zoom:1;*overflow: hidden;}
2 .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;}
3 .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/

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
css:整理9种元素水平垂直居中的方法
css:整理9种元素水平垂直居中的方法
73 0
html+css实战185-版权内容
html+css实战185-版权内容
12 0
html+css实战188-侧导航布局
html+css实战188-侧导航布局
12 0
html+css实战189-侧导航布局
html+css实战189-侧导航布局
9 0
html+css实战190-侧导航布局-箭头
html+css实战190-侧导航布局-箭头
11 0
html+css实战191-banner-圆点
html+css实战191-banner-圆点
15 0
html+css实战193-内容-布局
html+css实战193-内容-布局
10 0
html+css实战192-标题
html+css实战192-标题
18 0
html+css实战156-案例-banner
html+css实战156-案例-banner
12 0
+关注
鋒o丫头
这里需要一句话点缀。
139
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载