标准浏览器通过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. SVM的基础原理

    因为看cs231的时候用了一下multi-class的svm,所以又把svm给复习了一下,教材是周志华的西瓜书,这里是大概的笔记. 1.线性可分 对于一个数据集: 如果存在一个超平面X能够将D中的正负 ...

  2. Swift 里 Array (三) Inspecting an Array

    判断是否为空 使用的是Collection协议里isEmpty的判断. public var isEmpty: Bool { return startIndex == endIndex } start ...

  3. Apache Roller 5.0.3 XXE漏洞分析

    下载5.0.2的版本来分析 5.0.2的war包地址 http://archive.apache.org/dist/roller/roller-5/v5.0.2/bin/roller-weblogge ...

  4. 德哥PostgreSQL学习资料汇总(转)

    文章来自:https://yq.aliyun.com/articles/59251?spm=5176.100239.bloglist.95.5S5P9S 德哥博客新地址:https://billtia ...

  5. 课程二(Improving Deep Neural Networks: Hyperparameter tuning, Regularization and Optimization),第三周(Hyperparameter tuning, Batch Normalization and Programming Frameworks) —— 2.Programming assignments

    Tensorflow Welcome to the Tensorflow Tutorial! In this notebook you will learn all the basics of Ten ...

  6. crontab命令使用文档.txt

    基本格式 : * * * * * command 分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用*或者 */1表示 第2列表示小时1-23(0表示0点) 第3列表示日期1-31 第4列表示 ...

  7. hadoop家族成员

    1.概述 使用hadoop已经有一段时间了,从最开始懵懂到迷茫,再到各种阅读与写作,再到如今各种组合应用,逐渐已经离不开hadoop了,hadoop在大数据行业的成功,加速了它本身的发展,各大社区都能 ...

  8. 28-hadoop-hbase入门小程序

    hbase的完全分布式建立起来了, 可以试下好使不 1, 导包, {HBASE_HOME}/lib 下所有的jar包, 导入 2, 使用junit测试, 会报错, 因为缺少一个jar 3, 获取链接, ...

  9. superset--presto sql

    1.hive的partition的相关查询,由于presto不支持vachar和int的自动转换,所以使用where的时候需要手动转换一下. #select count(*) from userlog ...

  10. 开源方案搭建可离线的精美矢量切片地图服务-5.Mapbox离线项目实现

    项目成果展示(所有项目文件都在阿里云的共享云虚拟主机上,访问地图可以会有点慢,请多多包涵). 01:中国地图:http://test.sharegis.cn/mapbox/html/3china.ht ...