背景平铺(兼容IE8)
标准浏览器通过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;
上述代码中:
- 参数 src 是图片路径,sizingMethod = 'scale' 表示滤镜的尺寸方法为自适应容器大小;
- cover表示:将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
背景平铺(兼容IE8)的更多相关文章
- 手机端浏览器适配,background 背景平铺 ,有的出不来
.mobilePage .report { background: url(../images/mobile-report.png) repeat; background-size: 100% :/* ...
- php 给图片增加背景平铺水印代码
如果你想利用php 给图片增加背景平铺水印效果话,必须利用php的一个插件来实例,就是利用imagick,他可以给图片增加背景平铺水印效果哦,下面我们提供一款实例代码. 如果你想利用php教程 给图片 ...
- 背景图片background-size兼容ie8以下浏览器解决
背景图片不够大,然后就想到用background-size:100%; 测试浏览器的时候发现ie8以下不兼容,图片会自动填充平铺过去,然后出现背景不好看的现象.解决方法: background-ima ...
- android背景平铺方式 tileMode
创建重复的背景图片 在drawable目录下创建一个repeat_bg.xml: 然后在布局的xml文件中可以这样引用: ================================ ...
- 透明(颜色)渐变背景(颜色透明背景),兼容IE8
filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#00000000, endColo ...
- HTML布局排版2 div的和图片平铺方便管理
在HTML里,由于浏览器显示器等差异,浏览器的宽度也会有变化,为了适应不同的宽度,需要用到平铺.例如页面前面的固定的条等,如果是纯色,可以用背景色,如果不是纯色,是渐变等,可以用条状图平铺.常见的布局 ...
- ie8下背景图片平铺问题
IE9+及其他浏览器实现背景图片平铺可能需要一个属性就可以background-size:100%/cover; 但是ie8下background-size是不兼容的,因此我们需要用到滤镜,来解决背景 ...
- CSS背景100%平铺 浏览器缩小背景显示不全解决办法
本文我们分享前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章. 把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺 ...
- Android中设定背景图片平铺。
注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 在做Android开发时,我们常常需要为程序设定一个背景,但由于现在的Android设备尺寸不一,如果随便设置一个图片为背景,那么很 ...
随机推荐
- Java代码审计连载之—SQL注入
前言近日闲来无事,快两年都没怎么写代码了,打算写几行代码,做代码审计一年了,每天看代码都好几万行,突然发现自己都不会写代码了,真是很DT.想当初入门代码审计的时候真是非常难,网上几乎找不到什么java ...
- 微信小程序 - 实战小案例 - 简易记事本
多项技能,好像也不错.学习一下微信小程序. 教程:https://mp.weixin.qq.com/debug/wxadoc/dev/ 简介:一套用来开发在手机微信上运行的app框架,不用安装 组成: ...
- Mac下如何安装配置Homebrew
Last login: Mon Aug 7 13:57:29 on consolexiashenbindeMacBook-Pro:~ xiashenbin$ ruby -e "$(curl ...
- [Leetcode]44.跳跃游戏Ⅰ&&45.跳跃游戏Ⅱ
跳跃游戏链接 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 判断你是否能够到达最后一个位置. 示例 1: 输入: [2,3,1,1,4] 输出 ...
- POJ 2887
#include <iostream> #include <string> #define MAXN 2000 using namespace std; struct node ...
- POJ 2562
#include<iostream> #include<algorithm> #define MAXN 15 using namespace std; //int rec[MA ...
- TypeScript设计模式之装饰、代理
看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想 ...
- JobScheduler android任务调度处理组件(类似QuartZ)
JobScheduler是Android L(API21)新增的特性,用于定义满足某些条件下(电量,网络,时间,屏幕熄/亮 ,设备是否空闲 等)执行的任务.它的宗旨是把一些不是特别紧急的任务放到更合适 ...
- 图片训练:使用卷积神经网络(CNN)识别手写数字
这篇文章中,我们将使用CNN构建一个Tensorflow.js模型来分辨手写的数字.首先,我们通过使之“查看”数以千计的数字图片以及他们对应的标识来训练分辨器.然后我们再通过此模型从未“见到”过的测试 ...
- Selenium自动化测试Python五:WebDriver设计模式
WebDriver 设计模式 欢迎阅读WebDriver进阶讲义.本篇讲义将会重点介绍Selenium WebDriver 自动化框架的设计,着重使用Page Object设计模式,以及使用HTML测 ...