专栏首页前端说吧CSS-自定义高度的元素背景图如何自适应以及after伪类在ie下的处理

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 条评论
登录 后参与评论

相关文章

  • CSS-背景渐变的兼容写法

    xing.org1^
  • html2canvas - 解决办法之图片跨域导致的截图空白

    xing.org1^
  • canvas-渐变文字

    xing.org1^
  • 谷歌增强现实技术ARCore

    简介 随着,今年苹果在6月的WWDC 2017上发布的ARKit,谷歌也在前不久(8月29日),发布了用于Android平台的AR SDK——ARCore。这弥...

    xiangzhihong
  • EXTJS7 combobox本地模式 动态修改选项

    路过君
  • 谷歌增强现实技术ARCore

    简介 随着,今年苹果在6月的WWDC 2017上发布的ARKit,谷歌也在前不久(8月29日),发布了用于Android平台的AR SDK——ARCore。这弥...

    xiangzhihong
  • 生物信息学初识篇——第二章:序列比对(2)

    一长一短的两条序列,比较局部比比较全长更有意义。局部比对的算法和全局比对很相似,只是在选最大值时通过增加了第四个元素“0”,来达到比对局部的效果。序列p和序列q...

    DoubleHelix
  • Open Source C# (Mono Compatible) Library for Sending Push Notifications To iOS (iPhone/iPad APNS), A

    下面是一个C#库(兼容Mono),允许你推送通知到iOS应用程序和Android,Windows Phone和一些黑莓应用程序。在iOS和Android开发中给...

    张善友
  • AI溃败,被Dota2职业战队打蠢!独家专访OpenAI:我们发现一个Bug

    今天早间进行的Ti8 OpenAI表演赛上,人类职业战队paiN Gaming,在5v5的Dota2人机大战首场战斗中,轻松击败OpenAI Five战队。

    量子位
  • java习题练习

    4 package day20180313; public class Zylt { public static void main(String[...

    东风冷雪

扫码关注云+社区

领取腾讯云代金券