在之前的博客CSS hack中我有提到,一个问题的解决让我对CSS hack的态度从不屑一顾,到认真研究了实验一下,事情是这样的,最近产品发布,向来狂妄的我被一个bug纠缠住了,甚至丧气的表示我做不出来,说来也惭愧,难住我的并不是造火箭这样的难题,只是个背景图片。。。

前世今生

最近为产品做了一个扁平化的新Theme,看起来很美观,公司的艺术家看后表示需要一张有深意的背景图片,发给我了

放上去后一看艺术家就是艺术家,果真和Theme很搭而且让网站高端了很多(自我感脚),兴冲冲的就发布了上去,主要代码大概是这样的

<html>
<head>
<title>Test</title>
<style type="text/css" >
body
{
height:100%;
width:100%;
background:url(images/bg.png);
}
</style>
</head>
<body> </body>
<html>

很不错的样子

然而发布到产品测试站点后我的悲催一天就开始了,当页面有纵向滚动条的时候,网页是这样的

细心的同学马上就明白为什么了,图片在纵向上repeat了,而图片上下边的颜色不一样,在相接的地方不吻合,肿么办呢?

修改背景图片

相信大部分同学第一反应和我一样,让艺术家换个图片,把图片上下边、左右边的颜色修的一样就可以了,但是!但是。。。艺术家不为所动,坚持这样是最好的效果,好吧,展示技术的时候到了。

改变背景图片size

既然图片还得是这张图片,那么就改变它的大小,让其拉伸铺满整个网页,使用window在设壁纸的时候不经常这么干嘛,可可可怎么该背景图片的大小呢,用CSS3吧

background:url(images/bg.png);
-moz-background-size:cover;
-ms-background-size:cover;
-webkit-background-size:cover;
background-size:cover;

效果是这样的

聪明的同学第一时间就会想到你让IE可咋整?是呀,江湖传言这样就可以

background:url(images/bg.png);
-moz-background-size:cover;
-ms-background-size:cover;
-webkit-background-size:cover;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/bg.png,sizingMethod=scale);

哎呀妈呀,真好使

自己觉得很完美了,可可可,人家说你的效果已经不对了。

神马!纳尼!Where!

在IE下效果是对了,但是Chrome、Firefox下本来应该在中间的高亮区cover效果原因整个图片长宽都被拉伸而被移到了右上角,不对称了。。。

这这这

这可肿么办,逼我,嚼烂了我的HB铅笔后我写了这样的代码(代码写在MasterPage中,所以不必担心逐个页面更改问题)

<html>
<head>
<title>Test</title>
<style type="text/css" >
body
{
height:1000px;
width:100%;
margin:0;
} .cover
{
width:100%;
height:100%;
position:absolute;
z-index:-10;
} .cover img
{
width:100%;
height:100%;
border:0;
}
</style>
</head>
<body>
<div class="cover">
<image alt="" src="data:images/bg.png"/>
<div>
</body>
</html>

乍一看效果我还蛮开心的,可一拉滚动条

擦,你高度100%计算的是ViewPort的高度,不是scrollHeight啊!

固定住图片

咬碎了一只HB之后我想到一招,既然刚才的方法差点儿都好使了,只有滚动的时候不好使,那么让图片相对于屏幕固定住就可以了,不随网页滚动而动,也就是使用position:fixed不就搞定了吗

body
{
height:1000px;
width:100%;
margin:;
} .cover
{
width:100%;
height:100%;
position:fixed;
z-index:-10;
} .cover img
{
width:100%;
height:100%;
border:;
}

这次我按捺住了,拉了滚动条才敢乐

但是只乐了几秒,因为我看了一下IE。。。,尼玛!

关于怪异模式

因为网站是很久前写的代码,大家标准意识没有那么前卫,处于对table 100%计算与padding冲突等原因,在设计的时候没有加doctype,这就是耳闻能祥的怪异模式!

IE6本身就不支持position:fixed,这个还好,公司产品针对美国市场,不用兼容IE6了,但是IE所有版本在怪异模式下也不支持position:fixed,聪明的同学肯定会说前面你不说有MasterPage了吗,在里面加上DocType不就可以了,我也是这么想的,但却没这么做,加上后之前写的大部分控件还有很多页面布局会乱掉,唉!一着不慎,满盘皆输,不能加DocType,肿么办。。。

CSS hack

等了这么久主角CSS hack终于可以登场了,亏我没去学导演,主角要指定砍我,也不必太激动,刚才不是使用-moz-神马的了吗,也算是露脸儿了,这次让它领衔,看看怎么使用CSS hack让怪异模式的IE也能有类似于position:fixed的效果

.cover
{
width: 100%;
height: 100%;
position: fixed;
z-index: -10;
_position: absolute;
_top: expression(eval(document.body.scrollTop));
_left: expression(eval(document.body.scrollLeft));
}

本来前缀”_”只有IE6能够认识,不过在怪异模式下所有IE都能认识,所以IE下hack代码会覆盖上面的代码,可以expression表达式了解一下,还有在怪异模式下document.documentElement.scrollHeight这样的写法是取不到正确结果的,得像上面document.body.scrollTop这么写,聪明的同学如果看过CSS hack也能够很轻松的写出正常模式下的code了。最后偷偷上传个实际效果图

最后

就是这么个东东,让我对CSS hack有了新的认识

CSS hack前传——背景图片全屏的更多相关文章

  1. HTML设置body背景图片全屏显示

    在head标签中添加body属性设置: <head><style>body{background:url(timg1.jpg) top left;background-size ...

  2. 用css来写一个背景图片的切换

    代码如下: <!DOCTYPE HTML> <htmllang="en-US"> <head> <meta charset="U ...

  3. html-css控制背景图全屏拉伸不重复显示

    在HTML中,当我们设置背景图,只能采用是否重叠.居中.重叠方向这几个选项 CSS3中设置 body { background:#3d71b8 url(../back_main.png); backg ...

  4. 微信小程序点击图片全屏

    作为一个只懂简单HTML,jQuery,JS的web后台开发者,最近在学习小程序开发,现在将小程序的点击全屏功能的相关内容记录下来.如果有不对的地方或者有更简单的方法,请留言指教 0_0~ .js 文 ...

  5. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

  6. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  7. HTML+css实现图片全屏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. CSS background-color 、image 背景图片

    背景颜色 background-color 语法: background-color:<color> 默认值:transparent  透明 适用于:所有元素 继承性:无 动画性:是 计算 ...

  9. jquery简单的大背景banner图片全屏切换

    详细内容请点击 这个是我初毕业刚进公司那会帮同事(同时也是同学)写的一个PC端的全屏图片切换效果,对于刚毕业的我来说写出来那会的喜悦之情是无法言表的,那时的我还是什么不懂的小白白,俗称菜鸟.个人网站上 ...

随机推荐

  1. js的高级知识---词法分析

    词法分析 词法分析方法: js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数说明 具体步骤如下: 函数在运行的瞬间,生成一个活动对象(Active ...

  2. Linux Shell shortcut

    Ctrl+a跳到第一个字符前Ctrl+x同上但再按一次会从新回到原位置 Details see below: Linux shell shortcut

  3. 循序渐进DB2(第2版)——DBA系统管理、运维与应用案例

    <循序渐进DB2(第2版)——DBA系统管理.运维与应用案例> 基本信息 作者: 牛新庄    出版社:清华大学出版社 ISBN:9787302323013 上架时间:2013-7-3 出 ...

  4. 基于visual Studio2013解决C语言竞赛题之1015日期计算

        题目 解决代码及点评 /* 15. 已知某年不是闰年,给定该年某一天的月份和日期, 求这一天是该年的第几天. */ #include <stdio.h> #incl ...

  5. poi解析excel

    一.遇见的问题: 当单元格设置为日期类型时,cell.getCellStyle().getDataFormat()返回的值都为176. poi jar包3.14以上不支持用cell.getCellTy ...

  6. Visual Studio 自定义项目模板

    经常我们需要新建一个项目,然后新建我们的View文件夹,ViewModel文件夹,Model文件夹,还有把我们的ViewModelBase放入我们的VIewModel,如果还用框架,还需要加上好多. ...

  7. 【ASP.NET MVC 学习笔记】- 15 Unobtrusive Ajax

    本文参考:http://www.cnblogs.com/willick/p/3418517.html 1.Unobtrusive Ajax允许我们通过 MVC 的 Help mothod 来定义 Aj ...

  8. Quartus FFT IP核简介

    为了突出重点,仅对I/O数据流为steaming的情况作简要说明,以便快速上手,有关FFT ip核模型及每种设置详细介绍请参考官方手册FFT MegaCore Function User Guide. ...

  9. leetcode(js)算法之17电话号码的字母组合

    给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合. 给出数字到字母的映射如下(与电话按键相同).注意 1 不对应任何字母 示例: 输入:"23" 输出:[" ...

  10. 怎样从外网访问内网WebLogic?

    本地安装了一个WebLogic,只能在局域网内访问,怎样从外网也能访问到本地的WebLogic呢?本文将介绍具体的实现步骤. 准备工作 安装并启动WebLogic 默认安装的WebLogic端口是70 ...