兼容各浏览器的css背景图片拉伸代码

需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , sizingMethod= 'scale' ); 在ie中试用了一下还不错,背景图片可以拉伸了,但看到用了滤镜,看来火狐.谷歌等应该不兼容吧,用火狐.谷歌测试了下,背景图片没有了.东找西找,终于找到了可以兼容各个浏览器的css背景图片拉伸代码: background-image:url(***.jpg…

css背景图片拉伸以及100% 满屏显示

如何用css背景图片拉伸以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在css2.1之前是不能被修改的. 所以实际的结果是只能重复显示,所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性.就是用来控制背景图片的显示的.所以一般用作背景图片的有2类: 1.是一整张大图,尺寸和区域大小刚好吻合 2.一个很小的条状图,通过repeat后…

css背景图片拉伸

css背景图片拉伸 background-image:url(bg.png); -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; -moz-border-image: url(bg.png) 0; background-repeat:no-repeat\9; background-image:…

css 背景图片拉伸[转]

http://www.jeasyuicn.com/css-background-image-stretching.html background-image:url(bg.png); -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; -moz-border-image: url(bg.png)…

CSS背景图拉伸自适应尺寸，全浏览器兼容

突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效.思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代. 当CSS背景图片拉伸这个问题产生时,CSS3也只是浮云.... 对于IE而言网上常见的方法是使用CSS滤镜,但那时Firefox还小,Chrome还没出生,IE称霸天下.....但如今,我们用三四行简短的代码就能实现全浏览器兼容的方法: .bg{ background:url(http://wyz.67ge.com/…

css 如何让背景图片拉伸填充避免重复显示

如何让背景图片拉伸填充,这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在css2.1之前是不能被修改的. 所以实际的结果是只能重复显示,所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性.就是用来控制背景图片的显示的.所以一般用作背景图片的有2类: 1.是一整张大图,尺寸和区域大小刚好吻合 2.一个很小的条状图,通过repeat后,形成一个很规则的大图背景. 但…

css代码添加背景图片常用代码

css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; height: 0px; margin: 20px 0px;"> 2 背景图片 {background-image: url(url)|none} 3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} 4 背景固定 {…

利用wget 抓取网站网页包括css背景图片

利用wget 抓取网站网页包括css背景图片 wget是一款非常优秀的http/ftp下载工具,它功能强大,而且几乎所有的unix系统上都有.不过用它来dump比较现代的网站会有一个问题:不支持css文件,它不会自动下载.重新链接css中所指定的图片.这个问题导致的最常见的后果是dump下来的网站看不到背景图片.本文所介绍的这个脚本主要就是用来解决这个缺陷的. 这里简要介绍一下这个脚本的细节: 第3行用于设置要下载的网站的地址. 第10行用于将文件名转换为windows兼容的…

Bootstrap css背景图片的设置

一. 网页中添加图片的方式有两种一种是:通过<img>标签直接插入到html中另一种是:通过css背景属性添加居中方法:水平居中的text-align:center 和 margin:0 auto 极客学院例子http://www.jikexueyuan.com/course/656_3.html?ss=1 css背景图片的设置: http://paranimage.com/css-background-attribute/ 概述 CSS2 中有5个主要的背景(background)属性…

兼容主流浏览器的CSS透明代码

透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;}filter:alpha(opacity=50):这个是为IE6设的,可取值在0-100,其它三个0到1.-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器.-khtml-opacity: 0…

div css背景图片不显示

我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css.img.js三个文件夹(各自存放css样式表.img图片.js文件),图片a.png在css背景图片的路径应为:../img/a.png,而不是相对于index.html文件的路径img/a.png. 即:背景图片的相对路径写在哪里,就相对于谁来计算路径.…

（转）兼容主流浏览器的CSS透明代码

透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } filter:alpha(opacity=50):这个是为IE6设的,可取值在0-100,其它三个0到1.-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器.-khtml-opacity: 0.5…

CSS背景图片定位

原文:CSS背景图片定位在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图片的定位就需要用到CSS中的background样式,如: div{ background-image: url("1234.png"); background-repeat: no-repeat; background-position: 0px -100px; } 属性解释: back…

【IE6的疯狂之八】链接伪类（:hover）CSS背景图片有闪动BUG

IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath)} 常用的解决方案: 在页面底部添加以下IE6专用代码,让IE6缓存CSS背景图片至本地,这样a:hover时IE6就不会再重新向服务器请求加载背景图片了. XML/HTML代码 <!–[if IE 6]> <script type=”text/javascript”> docume…

【转】链接伪类（:hover）CSS背景图片有闪动BUG

来源:http://www.css88.com/archives/744 ------------------------------------------------------------------------------------------------- IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath)} 常用的解决方案: 在页面…

css背景图片位置：background的position（转）

css背景图片位置:background的position position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.background:url(../image/header.jpg) no-repeat left top; /*相当于0% 0%*/表示背景图片在指定div的位置,从左上角开始 2.background:url(../image/header.jpg) no-repeat right bottom; /*相…

vue打包后css背景图片地址找不到

背景图片变成了这样:static/css/static/imgs/xxx.jpg 解决方法,修改build/utils,添加 publicPath: '../../' 就行对比了下,components目录下的css背景图片也没有出现这种问题,出现问题的是src/base目录,目前只知道是vue-loader的问题解决参考:https://www.cnblogs.com/libo0125ok/p/9361038.html…

css背景图片加载失败，页面部分图标无法显示

1.问题表现:首屏缺失部分图标.点击按钮切换为激活状态时,部分按钮的激活态图标无法显示. 2.问题原因:网络极差,断断续续,点击时添加class:active变为激活态, active.png这张图片是在添加active这个class才加载的, css背景图片只加载一次,不管成功还是失败都不再加载第二次了, 所以刚好网络断掉时加载了active.png失败,不刷新的话,以后就再也看不到这张图片了 3.解决办法: 方法一: 把所有图片做成spirit图,首次就可以把所有图片加载好,不会出现部分图片…

CSS背景图片

1.背景图片插入代码格式:background-image:url(): 括号内填写图片路径 2.背景图片设置大小代码格式:background-size:宽.高 3.背景图片设置不平铺代码格式:background-repeat:no-repeat 由于背景图片插入后默认设置平铺效果,所以需使用该属性调整 4.背景图片定位代码格式:background-position:方向(top/right/bottom/left) 5.背景图片固定代码格式:background-attchme…

基于html5背景图片自适应代码

基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片.效果图如下: 在线预览源码下载实现的代码. css代码: .jawbone-hero .jawbone-hero-image { position:absolute; background:transparent none no-repeat scroll 50% 0; background-size:cover; top:; bottom:; left:; right:; width:10…

兼容主流浏览器的css渐变色

网页中的渐变色区域,渐变色背景,一般都是通过ps图片方法来实现,但是图片放得多了会影响网页的打开速度,本文介绍的就是用纯 CSS 实现 IE .Firefox.Chrome 和和Safari都支持的渐变色效果. 一. 支持IE的css渐变色设置 FILTER: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#EEEEEE', endColorstr='#ffffff'); 修改参数:Gradie…

CSS 背景图片的定位和缩放

在 CSS 中,利用 background-image 属性我们可以指定元素的背景图片,例如: .example { background-image: url(image/some.png); background-repeat: repeat; } 其中,PNG 是常见的背景图片格式:较新的浏览器,比如 Chrome 8+,Firefox 4+,IE 9+,Opera 9.5+ 和 Safari 5+,也支持使用 SVG 格式的背景图片.当背景图片大小超过元素的大小时,我们可以用 backg…

css背景图片定位练习（二）： background-position的百分比

background-position:x y; 百分比定位并不能直观的看出来,需要通过计算. background-position百分比计算公式: (容器宽度—背景图片的宽度)*x%=xpx(容器高度—背景图片的高度)*y%=ypx 上节我们使用的图片也可以继续拿来做练习: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl…

css背景图片定位练习（一）

首先准备一张雪碧图,Like this 背景图片的定位方法有3种,比较常用的两种为关键字:background-position: top left; (top/bottom/cennter/left/right) 像素:background-position: 水平移动px 垂直移动px; 关键词: 其中关键字方法background-position: top left 和left top效果是一样的.(注意:如果您仅规定了一个关键词,那么第二个值将是"center".) 关于像…

用jquery向网页添加背景图片拉伸模糊遮罩层代码

方法一:手动添加 1.在body内任意位置添加html代码 <div id="web_bg" style=" position:fixed; _position:absolute; top:0; width:100%; height:100%; z-index:-2"> <img style="position:fixed;" src="http://img.bizhi.sogou.com/images/2014/07…

CSS背景图片常见属性设置

在CSS中,图片属性的设置是必不可少的,下面介绍一下常见的图片属性: 1)背景图片插入:background-image:url(位置及名称); //默认在父级元素内的左上角 2)背景平铺方式:background-repeat:no-repeat; //不平铺 3)背景位置:background-position:right bottom; //横向在右边,纵向在下边,即右下角 center center; //位…

兼容不同浏览器的CSS前缀-webkit-，-ms-，-moz-，-o-

笔者在工作实践中发现当需要CSS兼容不同的浏览器时,需要在CSS样式前加上不同的前缀,从而使其他浏览器也能够达到相同的页面效果. 那么我们怎么去加上这些前缀呢?我们一起带着疑问来进行学习: 1.前缀分为:-webkit-,-ms-,-moz-,-o- -webkit-:主要兼容的浏览器是:谷歌的Chrome和苹果的Safari浏览器: -ms-:主要兼容的浏览器是:微软的Internet Explorer.Edge浏览器: -moz-:主要兼容的浏览器是:火狐的Firefox浏览器: -o-:主…