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/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

nwui —— 又一个go语言图形界面解决方案

Github: https://github.com/go-nwui/nwui 最近开的一个大坑,具体实现就是自动生成htm+css+js然后调用nw.js来显...

2833
来自专栏EAWorld

像踢球一样玩转Redux和React

引言 React的核心是使用组件定义界面的表现,是一个View层的前端库,简单来说它就是一堆前端组件,view,view,view,重要的事情...

3027
来自专栏pangguoming

svg矢量图绘制以及转换为Android可用的VectorDrawable资源

项目需要 要在快速设置面板里显示一个VoWiFi图标(为了能够区分出来图形,我把透明的背景填充为黑色了) ? 由于普通图片放大后容易失真,这里我们最好用矢量图(...

4929
来自专栏用户2442861的专栏

chrome使用技巧(看了定不让你失望,不错)

之前有看过刘哇勇写的Chrome 控制台不完全指南,让我觉得瞬间对chrome的了解实在太浅了。对此特意了解了一番(也就是在他的博文上进行了一些总结和了解一些其...

1471
来自专栏互联网杂技

开始学习React js

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件...

4256
来自专栏cnblogs

如何写好css系列之button

      现代前端行业的发展,如果你在css的时候,还没有利用一些预编译工具,是否觉得自己太low了。但你是否考虑过搭建一套自己前端框架。可能你会想这是否有必...

2327
来自专栏QQ会员技术团队的专栏

深入理解React(二) :数据流和事件原理

在React中,数据流是自上而下单向的从父节点传递到子节点,所以组件是简单且容易把握的,他们只需要从父节点提供的props中获取数据并渲染即可。如果顶层组件的某...

4.6K0
来自专栏Golang语言社区

nwui —— 又一个go语言图形界面解决方案

Github: https://github.com/go-nwui/nwui 最近开的一个大坑,具体实现就是自动生成htm+css+js然后调用nw.js来显...

3386
来自专栏ThoughtWorks

使用Enzyme测试React(Native)组件|洞见

组件化与UI测试 在组件化出现之前,我们不谈UI的单元测试,哪怕是对于UI页面进行测试都是一件非常困难的事情。其实组件化并不完全是为了复用,很多情况下也恰恰是为...

3224
来自专栏互联网杂技

HTML head 头标签 总结

HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多...

4907

扫码关注云+社区

领取腾讯云代金券