怎么用css把背景图片拉伸 不是平铺

html-css09

怎么用css把背景图片拉伸 不是平铺,第1张

怎么用css把背景图片拉伸 不是平铺 纯css实现的话可以使用css的background-size属性。语法如下示例:

p{background-size:100% 100%}

共有两个值,第一个值是宽度,第二个值是高度。如果只设置第一个值,则第二个值预设为"auto"。

css怎么把背景图片拉伸至100%

.a {width: 500pxheight: 500pxbackground: url(img/1.jpg)background-size: 100%} 不知道是不是你想要的结果

具体使用方法如下:

背景图尺寸(数值表示方式):

程式码如下:

#background-size{

background-size:200px 100px

}

背景图尺寸(百分比表示方式):

程式码如下:

#background-size2{

background-size:30% 60%

}

背景图尺寸(等比扩充套件图片来填满元素,即cover值):

程式码如下:

#background-size3{

background-size:cover

}

背景图尺寸(等比缩小图片来适应元素的尺寸,即contain值):

程式码如下:

#background-size4{

background-size:contain

}

背景图尺寸(以图片自身大小来填充元素,即auto值):

程式码如下:

#background-size5{

background-size:auto

}

/css 背景图片如何拉伸,不是平铺。求例子

<style type = "text/css">

body {

background-image:url("xxx.jpg")

no-repeat center center fixed

background-size: contain

}

试试看看background-size: ,contain 或者cover, stackoverflow里的回复还有几句没看懂的,

-webkit-background-size: cover

-moz-background-size: cover

-o-background-size: cover

我删了后也能在IE和firefox里显示拉伸的背景图片,不知道加上去有什么作用

css怎么定义背景图片拉伸?

.bg {

MARGIN: 0px PADDING-RIGHT: 8pxPADDING-LEFT: 8pxMIN-HEIGHT: 10pxBACKGROUND: url(images/leftboxContentBg.jpg) #edf6fb repeat-x 0px 0pxCOLOR: #4d9ecf

}

试试

css背景图片拉伸 不用滤镜

暂时没看到完美解决办法 只能是滤镜对付ie6

css3新背景特性对付新的浏览器了

div {

background: url(example.jpg) left (100% 2em) no-repeat,

url(example2.jpg) bottom left (100% 2em) no-repeat,

url(example3.jpg) center center (10em 10em) repeat-y

}

在这里,(100% 2em) 是background-size 的值;第一个背景图片将会出现在左上角并会被拉伸至该div的100%宽度和2em的高度。

求背景图片拉伸?

没有直接办法,只能用层来实现,示例如下:

<div class="page_speeder_2010202423">

把你的网页程式码加在这里

</div>

注意<div></div>要放在网页的<body></body>内,而原来<body></body>内的所有内容都要移动到<div>内。

这样也不是最佳解决方案,但暂时只能这样。

幻灯片背景图片怎么拉伸开来 现在的背景是平铺的,同样的图片好几张组合起来,怎么把背景图片拉伸为一张

点选单中的格式——背景——点下拉箭头中的填充效果——点图片,再从电脑上找到要做成背景的图片,点确定,再点应用,如果是所有幻灯片都要这样的背景就点“全部应用”。

Dreamweaver8 怎么样把背景图片拉伸全屏??

Dreamweaver8 工具下面有个页面属性 你开启后设置背景 还有平铺 什么的 一些属性 你看一下就会用了

解决方法有两种:

一种是CSS,使用background-size:cover实现图片的拉伸效果,但是IE8及以下版本不支援background-size,于是可以使用微软的滤镜效果,但是IE6不支援。

程式码如下:

body{background:url(bg.jpg) center centerbackground-size:coverheight:900pxwidth:100%

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')}

另一种是使用jQuery,在body中动态插入一个div,然后在div里包含一张图片,浏览器视窗改变大小时,动态设定背景图片的尺寸。

程式码如下:

$(function(){

$("body").append("<div id='main_bg' class="page_speeder_2001550029"/>")

$("#main_bg").append("<img src='bg.jpg' id='bigpic'>")

cover()

$(window).resize(function(){ 浏览器视窗变化

cover()

})

})

function cover(){

var win_width = $(window).width()

var win_height = $(window).height()

$("#bigpic").attr({width:win_width,height:win_height})

}

用background-size属性,你想给他多大的百分比都可以,不设置表示默认图片大小,设置100%表示全屏显示图片,按比例缩小或者放大。

这样就可以实现背景图片自适应父容器大小而自动变化,达到填充效果。 但是,图片会被拉伸填充,这并不是我们想要的效果,那么我们可以不设置 100% 参数,而是使用 cover 参数。

设置cover参数以后,背景图会按比例缩放填充满整个背景。如果使用IE浏览器你会发现,上面的 background-size:100% 100% 并没有起到作用,图片原本是怎样就怎样显示,比较大就只能显示一部分。

所以这时需要使用IE特有的滤镜 AlphaImageLoader 兼容性在IE5.5+以上版本的浏览器上都可以完美运行。

1、enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false_ true: 默认值。滤镜激活。

2、false: 滤镜被禁止。

3、sizingMethod: 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。

4、crop: 剪切图片以适应对象尺寸。

5、image: 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。

6、scale: 缩放图片以适应对象的尺寸边界。

7、src: 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。

特性:

1、Enabled: 可读写。布尔值(Boolean)。参阅 enabled 属性。

2、sizingMethod: 可读写。字符串(String)。参阅 sizingMethod 属性。

3、src: 可读写。字符串(String)。参阅 src 属性。

说明:

在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG格式,则0%-100%的透明度也被提供。

PNG格式的图片的透明度不妨碍你选择文本。也就是说,你可以选择显示在PNG格式的图片完全透明区域后面的内容。这样我们就可以完美兼容绝大多数的浏览器,实现用CSS让背景图片100%填充了。

css设置背景图片全屏,如果只是将其当做一张图片显示,可以通过css控制。超大图片,引入进来即可根据大小缩放。

如果这张图片为背景图片由于背景图片不具有伸缩性,只能通过别的方法绕着解决,在ie中可以用,实现背景拉伸铺满整个浏览器,但其它的浏览器不支持。

具体解决方法如下: 

1、创建以下目录结构的测试页面。

2、将测试图片显示在浏览器界面上,效果如下。

3、通过CSS设置背景图片,默认效果如下,图片被自动重复以铺满窗口。

4、通过CSS设置背景图片不重复,此时,图片将不能铺满窗口。

5、通过CSS设置图片大小100%,效果如下,图片铺满窗口。

6、通过CSS设置图片大小cover,效果如下,图片铺满窗口。