`

背景拉伸平铺

 
阅读更多

现在WEB页面设计比较流行使用大背景图,那么您知道如何使用一张大背景图进行拉伸效果呢?也就是说使用一张固定尺寸的背景图片,让它在页面中随着浏览器尺寸进行拉伸,就像我们的电脑桌面壁纸效果。本文将带您一起使用jQueryCSS实现背景图片拉伸效果。

将背景图片拉伸,而不是平铺,注意平铺效果我们可以使用CSSbackground-repeat来实行背景图片的平铺效果,本文讨论的是背景图片的拉伸效果。这种效果在一些前卫的页面设计中已经广泛应用,尤其在一些独立页面,像登录页面使用拉伸的背景图片效果比较常见。

目前有两种解决方案可以实现背景图片拉伸效果,一种是CSS,我们可以使用background-size:cover实现图片的拉伸效果,但是IE8及以下版本不支持background-size,于是我们尝试使用微软的滤镜效果,但是IE6不支持,毕竟还有一些后进生在使用IE6。另一种解决方案是使用jQuery,完全解决浏览器的兼容性问题,还是jQuery威武。

CSS解决方案我们准备一张背景图片,任意尺寸的,假设我们要做一个登录页面,页面中使用拉升的背景图。我们只需要在body中加入以下代码:

<div id=“main">

 ....登录表单

</div>

然后CSS这样写:

body{background:urlbg.jpg center center;background-size:cover;height:900px;width:100%; filter:progid:DXImageTransform.Microsoft.AlphaImageLoadersrc=‘bg.jpg’ sizingMethod=‘scale’;} #main{position:absolute; top:50%; left:50%; width:420px; height:250px; margin-125px 0 0 -210px; background#ffc}

我们使用background-size实现了背景图片的拉伸效果,但是要兼容IE7IE8就需要使用滤镜filter来实现,注意该方案中,必须指定容器的高度,本例中指定了height:900px。另外我们要让登录窗口居中,CSS写法参照:如何让DIV水平和垂直居中

CSS方案有一定的局限性,必须指定容器高度,IE6不兼容,请看DEMO1,那么比较完美的解决方案就是使用jQuery了。

jQuery解决方案我们使用jQuery先向body中动态插入一个DIV,并且该DIV中包含一张图片,也就是我们要求拉伸效果的背景图片。然后使用jQuery获取浏览器窗口的大小,根据浏览器窗口大小,动态设置背景图片的尺寸(宽和高)。

<script language="javascript" src="js/jquery.js"></script>
<script language="javascript">
$(function(){
    $("body").append("<div id='main_bg'/>");
    $("#main_bg").append("<img src='images/banner1.png' 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});
}
</script>

 上述代码中,cover()函数就是动态的设置了背景图片的尺寸,通过jQueryappend方法动态加入背景图片,当页面加载完成时已经浏览器窗口变化时都能实现背景图片的拉伸效果,也就是页面readyresize都调用了cover()函数。

分享到:
评论

相关推荐

    网站背景拉伸平铺jQuery插件.zip

    网站背景拉伸平铺jQuery插件是Web开发中一种实用的工具,主要目的是为了实现网页背景图片能够根据浏览器窗口尺寸动态地自适应调整,从而达到全屏或平铺的效果。在设计网页时,一个美观的背景可以提升用户体验,而这...

    网站背景拉伸平铺jQuery插件特效代码

    网站背景拉伸平铺jQuery插件是一种常用的网页设计技术,旨在提供一种动态且美观的用户体验。在网页设计中,背景图像的处理至关重要,因为它能够营造出独特的视觉效果,吸引用户的注意力,同时为网站增添品牌风格。这...

    带背景的对话框,图片做CDialog的背景,可以平铺、拉伸、居中

    - 设置背景:在CDialog派生类的OnPaint()函数中,使用CDC类的DrawBitmap()方法来绘制背景图片,根据需要选择平铺、拉伸或居中模式。 - 处理窗口大小变化:重写OnSize()函数,当对话框大小改变时更新背景图片的绘制...

    实现网页背景图片拉伸的两种方法

    其中,图片的拉伸是一种常见的处理方式,能够让背景图片适配不同大小的屏幕和浏览器窗口。本文将介绍两种实现网页背景图片拉伸的方法,一种通过CSS属性来实现,另一种利用jQuery动态调整图片尺寸。 首先,我们来...

    按钮重绘,背景拉伸

    "按钮重绘,背景拉伸"这一主题涉及到图形用户界面(GUI)开发中的两个关键技术点:自定义控件的绘制和图像资源的适配。下面我们将深入探讨这两个方面。 首先,我们来讨论“按钮重绘”。在许多编程环境中,如Java的...

    简单方法实现Delphi窗体背景平铺效果..rar

    在Delphi编程环境中,创建美观的用户界面是至关重要的,其中一种常见的设计手法就是让窗体的背景平铺特定的图像。本教程将详细介绍如何在Delphi中实现窗体背景的平铺效果,使得背景图片无缝重复显示,提升应用的整体...

    Flex中背景平铺的做法

    `BitmapFill`允许我们指定一个图像作为填充源,并且可以控制该图像如何平铺或拉伸。在`updateDisplayList`方法中,我们首先清空图形上下文,然后创建一个`BitmapFill`实例,并设置其源为样式中的`backgroundImage`...

    用CSS把背景图片平铺参考.pdf

    ASP.NET中把背景图片拉伸 在ASP.NET中,我们可以使用background-image属性来设置背景图片,并使用background-repeat属性来实现背景图片的平铺。 例如: ```css body { background-image: url('a.jpg'); ...

    高仿android-QQ空间下拉背景图拉伸回弹效果

    通常,我们可以将图片设置为可拉伸的ImageView,并通过设置ScaleType来实现图片的平铺或拉伸。当用户下拉时,根据滑动距离调整图片的ScaleX和ScaleY属性,使其看起来像是被拉伸了。 3. **弹性动画效果**: 当用户...

    body背景图片拉伸另类实现

    在网页设计中,有时我们希望页面的背景图片能够随着浏览器窗口的大小变化而拉伸,以保持背景图像的完整性或连续性。然而,HTML `&lt;body&gt;` 元素默认的背景属性并不支持这样的拉伸效果。这时,我们可以采用一些非传统的...

    CSS实现HTML背景图片拉伸铺满示例

    特别是,当需要将背景图片拉伸以铺满整个页面或页面的某个元素时,这一需求变得尤为突出。在本次的示例中,我们将探讨如何使用CSS来实现背景图片的拉伸铺满效果。 首先,我们注意到示例中使用的CSS选择器`#img`,这...

    div100%平铺 浏览器缩小或在手机上查看 div背景显示不全bug的解决.rar

    在网页设计中,我们经常遇到一个挑战:如何确保一个`div`元素的背景图片能够完美地100%平铺,无论用户是使用桌面浏览器还是移动设备浏览,都能看到完整且适应的背景。这个问题通常源于浏览器对CSS样式的不同解析方式...

    解决Qt窗口设置背景

    在本篇文章中,我们将深入探讨如何在Qt框架中为QWidget和QMainWindow等组件设置背景图像。这不仅是美化用户界面的有效手段,也是实现特定设计风格的关键技术之一。通过具体实例和详细解析,帮助读者掌握Qt窗口背景...

    使MDI窗口有一个背景图象或使它平铺-.zip

    对于简单的背景图片,可以将图片加载到`PictureBox`控件中,然后将其`SizeMode`属性设置为`StretchImage`或`Tile`,以实现拉伸或平铺效果。如果想要自定义更复杂的平铺效果,可以重写窗体的`OnPaint`方法,使用`...

    VC 平铺BMP图像背景到窗口中.rar

    5. **绘制位图**:遍历每个需要平铺的位置,使用CDC::StretchBlt方法,将BMP拉伸或缩放至合适大小,并绘制到DC上。StretchBlt函数接受多个参数,包括源和目标矩形、源和目标DC以及绘图模式等。 6. **重绘事件**:当...

    VC++位图拉伸与背景叠加应用示例

    内容索引:VC/C++源码,图形处理,位图 通过这个国外的程序,你会了解到VC++位图拉伸与背景叠加方面的应用示例,普通风格:没有背景显示,以位图作为背景,以指定颜色作为背景,学习使用位图拉伸作为背景、位图平铺等...

    如何给MFC对话框添加背景图片

    然而,标准的MFC对话框通常只有单一的颜色作为背景,如果我们想要给对话框添加个性化的背景图片,就需要进行一些自定义工作。本教程将详细解释如何在MFC对话框中添加背景图片。 1. **添加背景图片资源** 首先,你...

    利用jQuery和CSS将背景图片拉伸

    在讲解之前,需要明确一点,背景图片的平铺可以通过CSS的`background-repeat`属性实现,但本文的重点在于背景图片的拉伸。 首先,我们介绍一种纯CSS的解决方案。CSS3引入的`background-size`属性可以帮助我们实现...

    asp.net 用图像平铺形状

    在ASP.NET中,图像平铺是一种常见的网页设计...此外,还可以根据需求调整平铺的方向(水平、垂直或两者)和填充模式(重复、拉伸等)。对于更复杂的需求,可以研究WPF或SVG等技术,它们提供了更强大的图形处理能力。

    css3实现背景图片拉伸效果像桌面壁纸一样

    实现这种背景拉伸效果像桌面壁纸一样是网页设计中增强视觉体验的常用技巧。它能够使网站看起来更为专业和具有吸引力。不过,在使用时需要注意图片的版权问题,确保所使用的图片是合法的并且适合网站的风格和内容。 ...

Global site tag (gtag.js) - Google Analytics