标准浏览器通过background-size属性设置;IE8以下通过滤镜实现。

代码如下:

 /* IE8 */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='demo.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='demo.jpg', sizingMethod='scale'); /* 标准浏览器 */
background-size: cover;

上述代码中:

  1. 参数 src 是图片路径,sizingMethod = 'scale' 表示滤镜的尺寸方法为自适应容器大小;
  2. cover表示:将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。

背景平铺(兼容IE8)的更多相关文章

  1. 手机端浏览器适配,background 背景平铺 ,有的出不来

    .mobilePage .report { background: url(../images/mobile-report.png) repeat; background-size: 100% :/* ...

  2. php 给图片增加背景平铺水印代码

    如果你想利用php 给图片增加背景平铺水印效果话,必须利用php的一个插件来实例,就是利用imagick,他可以给图片增加背景平铺水印效果哦,下面我们提供一款实例代码. 如果你想利用php教程 给图片 ...

  3. 背景图片background-size兼容ie8以下浏览器解决

    背景图片不够大,然后就想到用background-size:100%; 测试浏览器的时候发现ie8以下不兼容,图片会自动填充平铺过去,然后出现背景不好看的现象.解决方法: background-ima ...

  4. android背景平铺方式 tileMode

    创建重复的背景图片  在drawable目录下创建一个repeat_bg.xml:    然后在布局的xml文件中可以这样引用:    ================================ ...

  5. 透明(颜色)渐变背景(颜色透明背景),兼容IE8

    filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#00000000, endColo ...

  6. HTML布局排版2 div的和图片平铺方便管理

    在HTML里,由于浏览器显示器等差异,浏览器的宽度也会有变化,为了适应不同的宽度,需要用到平铺.例如页面前面的固定的条等,如果是纯色,可以用背景色,如果不是纯色,是渐变等,可以用条状图平铺.常见的布局 ...

  7. ie8下背景图片平铺问题

    IE9+及其他浏览器实现背景图片平铺可能需要一个属性就可以background-size:100%/cover; 但是ie8下background-size是不兼容的,因此我们需要用到滤镜,来解决背景 ...

  8. CSS背景100%平铺 浏览器缩小背景显示不全解决办法

    本文我们分享前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章. 把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺 ...

  9. Android中设定背景图片平铺。

    注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 在做Android开发时,我们常常需要为程序设定一个背景,但由于现在的Android设备尺寸不一,如果随便设置一个图片为背景,那么很 ...

随机推荐

  1. collections, time, queue的应用

    collections  (克来克深思) Counter from collections import Counter # 引入模块, 计数器 Counter(康特) s = 'sadfasdfas ...

  2. css 的 conic-gradient 学习

    偶然间在微信公众号奇舞周刊上看到了这篇文章<CSS Painting API>,算是对 conic-gradient的初次见面. 后来有空的时候,百度搜了一下,看了这篇文章<CSS神 ...

  3. javaScript中BOM

    BOM是browser object model的缩写,简称浏览器对象模型 主要处理浏览器窗口(window)和框架(iframe),简述了与浏览器进行交互的方法和接口, 可以对浏览器窗口进行访问和操 ...

  4. D16——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D16 20180927内容纲要: 1.JavaScript介绍 2.JavaScript功能介绍 3.JavaScript变量 4.Dom操作 a.获取标签 b ...

  5. JFrame、JPanel 、Layout开发的简单例子

    写了Java这么久,居然发现想手写一个带网格袋布局的JFrame,还不记得怎么写,写了这么多代码真不敢说记得所有细节. 幸好,只要记清楚概念就能快速开发.首先,明确一下3种容器类的差别和用途: No. ...

  6. [原创]Chorme密码读取工具\Firefox密码读取工具

    工具: getBrowserPWD编译: VC作者: K8哥哥博客: http://qqhack8.blog.163.com发布: 2017/11/24 16:16:17 简介: 有时为了方便我们会让 ...

  7. 使用webpack和react搭建项目

    看了N多博客,日志,一边迷茫一边摸索.本文记录流程.我怕自己忘了...并且修复了博客园首页推荐那个日志中遇到的bug 1.webstorm新建一个空白项目,比如webpack_demo 2.因为要用r ...

  8. 继承extends、super、this、方法重写overiding、final、代码块_DAY08

    1:Math类的随机数(掌握) 类名调用静态方法.  包:java.lang 类:Math 方法:public static double random(): Java.lang包下的类是不用导包就可 ...

  9. C++:复制构造函数

    关于复制构造函数的具体细节:浅层复制和深层复制等可以看下 范磊老师的<零起点学通C++>视频教程和<C++ Primer Plus>一书. 相信看完后,对复制构造函数能基本掌握 ...

  10. Install nginx on centos

    1. 安装wget. sudo yum -y install wget 2. 下载nginx发布代码. sudo wget http://nginx.org/download/nginx-1.8.0. ...