body里的背景图片如何做到自动拉伸?

snyyh5 2009-04-22 04:27:53

各位大哥能否给出详细代码啊多谢啦!!!很着急

...全文

38978 30 打赏收藏转发到动态举报

写回复

用AI写文章

30 条回复

切换为时间正序

请发表友善的回复…

发表回复

qietingfenying 2012-07-06

打赏
举报

楼主的图片是一个大小固定的文件
拉伸反而显示效果不太好吧

一般做正常大小和一个宽屏版的，保证不模糊。

weideming 2012-06-29

打赏
举报

weideming 2012-06-29

打赏
举报

老子乱了。。。有没有个OK的。。。Shit

lw5853103 2012-06-29

打赏
举报

我给你一个解决方案.
你设计一个背景图片，上半部分为logo，下半部分为纯色。假如纯色是#eee，图片名称是banner.jpg
设置如下样式:
background: #eee url(banner.jpg) no-repeat fixed;
由于背景图片是高于背景颜色的，所以当图片够高的显示区域看到的是logo，当图片不够高的时候看的是颜色。这样就比较和谐。
如果你不是很明白的话，建议搜索下css背景图像技术。

zhangyhc 2012-06-29

打赏
举报

嗯，提不太明确

kinghome 2012-06-29

打赏
举报

我想LZ碰到的问题是这样吧。
当背景图比屏幕小，LZ希望图片自动适应到屏幕，而不是通过背景图的循环来填充屏幕吧。

zhangyhc 2012-06-29

打赏
举报

body{background:url(../images/aa.gif) repeat;}

laidezhong 2011-05-14

打赏
举报

[Quote=引用 22 楼 healer_kx 的回复:]

引用 6 楼 gaocen7710 的回复:

.bg {background-repeat:"三种情况"}；三种情况为：no-repeat（不重复）、repeat-y（纵向重复）、repeat-x（横向重复），默认的时候是纵向和横向都重复。

.bg {background-positon:（x,y）background-positon的妙用，他是定位图片所在位置；他的位置可以用像素表……
[/Quote]

笑而不语

healer_kx 2011-05-14

打赏
举报

[Quote=引用 6 楼 gaocen7710 的回复:]

.bg {background-repeat:"三种情况"}；三种情况为：no-repeat（不重复）、repeat-y（纵向重复）、repeat-x（横向重复），默认的时候是纵向和横向都重复。

.bg {background-positon:（x,y）background-positon的妙用，他是定位图片所在位置；他的位置可以用像素表示，还可以用英文（left、right、botto……
[/Quote]

UP

laidezhong 2011-05-14

打赏
举报

曲线救国啊，



<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>



<body>

<div><img src="http://www.baidu.com/img/baidu_sylogo1.gif" width="100%"></div>

<div style="position:absolute; top:0px;left:0px; width:100%">

	<div class="body" style="width:800px; margin:0px auto;">Hello World</div>

</div>

</body>

</html>

noapple1000 2011-05-12

打赏
举报

外面那层 zoom:1
试试

luo7612 2011-05-12

打赏
举报

背景图片他自动会拉伸了

zuo_hengheng 2011-05-11

打赏
举报

[Quote=引用 17 楼 meng_huan 的回复:]
引用 5 楼 hebeicctv 的回复:
<style>
.bg{FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src='0921.jpg' ,sizingMethod='scale')}
</style>
<div class="bg" style="width:500;height:50……
[/Quote]
...可是FF不支持滤镜。。然后呢？

meng_huan 2011-05-10

打赏
举报

[Quote=引用 5 楼 hebeicctv 的回复:]
<style>
.bg{FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src='0921.jpg' ,sizingMethod='scale')}
</style>
<div class="bg" style="width:500;height:500px;">
</div>
这个可以刚……
[/Quote]
说错了，是这个………………………………完全符合题意

meng_huan 2011-05-10

打赏
举报

[Quote=引用 3 楼 hebeicctv 的回复:]
<body BACKGROUND= '0921.jpg' style="background-repeat: no-repeat;background-attachment: scroll;margin: auto;">

</body>
scroll 默认。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动
[/Quote]
这个才是真的………………其他的连意思都不清楚，我就晕了，特意注册个上来顶下。

调皮的蟠桃 2009-11-30

打赏
举报

要找好相对位置，看你所控制的标签相对于那个标签来控制，它的大小是不会因为电脑显示器的改变而改变的。

xiangtanboy 2009-11-30

打赏
举报

css无法拉伸背景
传说中的滤镜可以, 但是 IE only

andyiouv1 2009-11-28

打赏
举报

[Quote=引用 12 楼 ziyuanxian 的回复:]
你把背景图弄大点不是更快
[/Quote]
现在每个人的电脑显示器都是不太一样的你那也不是解决问题的方法啊

ziyuanxian 2009-04-22

打赏
举报

你把背景图弄大点不是更快

xiaojing7 2009-04-22

打赏
举报

[Quote=引用 6 楼 gaocen7710 的回复:]
.bg {background-repeat:"三种情况"}；三种情况为：no-repeat（不重复）、repeat-y（纵向重复）、repeat-x（横向重复），默认的时候是纵向和横向都重复。

.bg {background-positon:（x,y）background-positon的妙用，他是定位图片所在位置；他的位置可以用像素表示，还可以用英文（left、right、bottom、top、middle、center）这些就不用我解释了。xy坐标也不用我解释了吧

回答完毕！
[/Quote]
...

加载更多回复（10）

源代码：背景图片自动拉伸，背景永远都是一张整图

注意：该仓库目前正在寻找维护者： : 反拉伸 Backstretch是一个简单的jQuery插件，可让您将动态调整大小的，具有幻灯片显示功能的背景图像添加到任何页面或元素。图像将拉伸以适合页面/元素，并且将随着窗口/元素大小的变化自动调整大小。 **我们重新营业！合并danielgindi/jquery-backstretch ，所有的眼睛都请回到这里！ ** 演示版该软件包中包含几个示例，或者可以随时对其进行实时检查。安装从GitHub下载/保存JS文件。使用以下命令通过Bower安装。 bower install jquery-backstretch 设置在您的网页中包含jQuery库（1.7版或更高版本）和Backstretch插件文件（最好在页面底部，关闭BODY标记之前）： < script src =" //ajax.googleapis.com/aj

html设置背景图大小，自动拉伸背景图