background-size拉伸背景图片

在制作页面中常需要对背景图片在容器中进行平铺,可用background-size属性对背景编辑:拉伸,压缩等~ background-size:contain; 将背景扩展到整个容器大小. 较为实用的:使用百分号对背景图编辑 background-size:50% 50%; 第一个参数在x轴方向,第二个参数在y轴方向扩展.…

首先有两个概念绝对路径,从根目录为起点到你所在的目录: 相对路径,从一个目录为起点到你所在的目录. 例如: ┍ A文件夹 C -| ┕ B文件夹绝对路径: C:\A文件夹相对路径(如果你在B文件夹时): ..\B文件夹 (‘..\’向上一级意思) 在实际操作过程中,相对地址和css是内联还是外联有关系的,这个问题在使用绝对地址时不存在. 内联时:{background-image: url(images/new_8.…

CSS中背景图片的background-position中的left top到底是相对于谁的？

在学习的时候遇到了如下问题: CSS中背景图片的background-position中的left top到底是相对于谁的,content-box?padding-box?border-box? background属性中的backgound-image和background-color相对的box是一致的吗? 如何做到背景图片位于容器的右边10px,底边10px? 首先我们来看一下盒模型:盒模型从外到内依次为:margin-box,border-box,padding-box,content-…

解决android:background背景图片被拉伸问题

ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸.src是图片内容(前景),bg是背景,可以同时使用. 此外:scaleType只对src起作用:bg可设置透明度,比如在ImageButton中就可以用android:scaleType控制图片的缩放方式如上所述,background设置的图片会跟View组件给定的长宽比例进行拉伸.举个例子, 36x36 px的图标…

理解CSS3中的background－size(对响应性图片等比例缩放)

理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性给图片设置固定的宽度和高度的固定宽度400px和高度200px-使用background-size:400px 200px缩放设置固定宽度400px和高度200px-使用background-size:400px;的缩放设置,那么第二个参数会自动转换为auto 固定宽度400px和高度200px-使用background-size:100% 100%的缩放设置固定宽…

background的属性和背景图片定位的实例

本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍contain.cover) 5.background-origin属性值(borde-box.padding-box.content-box) 6.多背景图片示例背景图片定位(background-position)原理 A. 语法:Background-position:水平位置垂直位置 B.…

CSS3中的background－size(对响应性图片等比例缩放)

background-size的基本属性 background-size: 可以设定背景图像的尺寸,该属性是css3中的,在移动端使用的地方很多,比如最常见的地方在做响应性布局的时候,比如之前做的项目中有轮播图片,为了自适应不同大小分辨率的图片,我门需要使用css3中的媒体查询来针对不同的分辨率设置宽度和高度,虽然这种方式是可以解决问题,但是解决方式并不是太好,并且很繁琐,当然我门也想过直接使用百分比设置图片的大小,比如width(宽度): 100%,height(高度):100%; 但是设置图…

如何通过CSS实现背景图片自动平铺或拉伸至整个屏幕（自适应大小）

默认情况下,通过HTML代码的BODY标签设置好背景图片<body background="x.jpg"> 后,图片会自动横向和纵向平铺.这就会产生一些美观上的问题. XP人提供CSS代码如下,放在页面头部即可,仅供参考: <style type="text/css"> body { background:url(/img/background.png); background-repeat: repeat-x; background-pos…

拉伸按钮背景图片:stretchableImageWithLeftCapWidth:

// 1. 拉伸按钮背景图片 // 1) 登录按钮 UIImage *loginImage = [UIImage imageNamed:@"LoginGreenBigBtn"]; loginImage = [loginImage stretchableImageWithLeftCapWidth:loginImage.size.width * 0.5 topCapHeight:loginImage.size.height * 0.5]; [_loginButton setBackgrou…

background: url 背景图片加时间戳不显示图片

在项目中一段这样的代码背景图片加时间戳图片显示不出来 <div id="header" class="header clearfix" style=" background: url(/U_HomeImage/T_CityManage/4_CM_Pic.png?2014-8-4 16:46:51) no-repeat left;background-size: 180px 87px;padding-left: 190px;"> 图片…

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

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

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; /*相当于100% 100%*/表示背景图片从指定div的右下角开…

background属性冲突导致的部分浏览器背景图片不显示问题

前几天在项目中遇到了一个让人摸不着头脑的bug,测试说页面显示有点问题并发了截图, 正常的显示状态是这样首先我自信地用自己的手机检查了一下,没有问题,问清楚后得知是UC浏览器中出现的,UC的内核是u3,基于webkit开发的,平时并没有用过,应该是在细节处理上加了一些优化功能. 说回问题,第一眼看觉得可能是不同尺寸屏幕导致某个元素高度超出了,结果并不是这样.找了一会儿,终于发现是那一块的背景图片没有显示.图片并没有报404,也没有被其他属性覆盖, 而且上下文中的背景图都能正常显示,唯独这个不显…

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

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

ie8 background背景图片不显示问题

在chrome,FF可以显示,但是在ie8背景图片显示不出来 css改为如下可以正常显示: background: url(../images/goods.png) no-repeat !important;…

background 的一些小的细节: 1, 背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width + padding ; 2设置多个背景图片 ; 3) background-position定位百分比的计算方式: 4)background-clip 和 background-origin 的区别

1. background (background-color, background-image) 背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width + padding ; 背景颜色: 起点是 border的外边缘 http://www.w3cplus.com/content/css-background-origin 背景图片:定位的起点是 padding的外边缘处: 这是因为: background-origin 指定背景图像的定位区域 …

background 背景图片在IE8中不显示解决方法

我给ul加了一个背景图片 background 火狐 ie9 ch都显示.唯独在IE8中不显示之前的样式代码 background: url( rgba(, , , ); 在ie8中改成 background-image:url("/images/search.gif"); background-attachment:scroll; background-repeat:no-repeat; background-position-x:%; background-position-y:…

css的背景图片background

1.使用背景图片的标签定设置宽高,没有设置的话,也需要用内容来撑开标签. 2.如果对同一个标签分开设置背景图片和颜色,背景颜色一定要写在背景图片后面,不然会被覆盖 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #bg{ width: 100%; height:…

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

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

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背景图片位置：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; /*相…

(转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是…

背景图片之background的用法

常用的background背景属性有: background-color 设置颜色作为对象背景颜色background-image 设置图片作为背景图片background-repeat 设置背景平铺重复方向background-attachment 设置或检索背景图像是随对象内容滚动还是固定的.background-position 设置或检索对象的背景图像位置. 背景图片自适应: 相应语法:background-size :[ <length> | <percentage> |…

HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同. 前两种定位,都是将背景图片左上角的原点,放置在规定的位置.请看下面这张图…

background 背景图片 --css3

background 1.设置背景平铺background-repeat round :图片会进行缩放后平铺space : 图片会进行平铺,中间留下空白空间注:当滚动行为设为fixed,round和space没有效果 2.设置滚动时的行为background-attachmentscroll:父元素滚动时,跟随滚动:子元素滚动时,不跟随滚动.背景图片跟随父元素滚动local:父元素滚动时,跟随滚动:子元素滚动时,跟随滚动.背景图片一直跟随滚动fixed:父元素滚动时,不跟随滚动:子元素滚动时,…

用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 hack前传——背景图片全屏

在之前的博客CSS hack中我有提到,一个问题的解决让我对CSS hack的态度从不屑一顾,到认真研究了实验一下,事情是这样的,最近产品发布,向来狂妄的我被一个bug纠缠住了,甚至丧气的表示我做不出来,说来也惭愧,难住我的并不是造火箭这样的难题,只是个背景图片... 前世今生最近为产品做了一个扁平化的新Theme,看起来很美观,公司的艺术家看后表示需要一张有深意的背景图片,发给我了放上去后一看艺术家就是艺术家,果真和Theme很搭而且让网站高端了很多(自我感脚),兴冲冲的就发布了上去,主要…

iOS关于UILabel 基本属性背景图片背景色

[代码] iOS关于UILabel 基本属性背景图片背景色 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75…

j-query应用---鼠标悬停不同文字显示不同背景图片banner动画

源代码部分:注意事项:样式表的引用的路径要一致. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta htt…

css2如何设置全屏背景图片

每次在做一个网站后台登陆页面的时候,当UI给我一张背景是不规律的背景图片,但是在设置为背景时,总会遇到屏幕大小的问题,导致背景图片有可能平铺.这样UI的效果达不到也会很难看. 本来我想用body{background: url(img.jpg) no-repeat top center;}的办法来拉伸的,但是在360的兼容模式浏览器就不行了.因为这是CSS3的属性.而CSS2本身没有这个属性,那怎么办呢?! 可以利用一个DIV层,在里面装载一个IMG标签.然后设置DIV和IMG的大小为100%,…