`
Nacdice
  • 浏览: 11802 次
  • 性别: Icon_minigender_1
  • 来自: 西安
文章分类
社区版块
存档分类
最新评论

网页背景图拉伸的简便方法

阅读更多
近日在做一个webbroswer的应用。需要一个背景图,在body属性内只有简单的几个可控制,要么平铺,要么居中,居左居右等。我想要一个小图,自动拉伸到浏览器的宽和高。

在网上找了一下相关代码,说是只能用层来实现,不理想,最后找到一个用css滤镜实现的方法,比较简洁,现贴出来给需要的朋友参考:

<BODY style="filter:progid:dximagetransform.microsoft.alphaimageloader(src='$apppath$imgcha.gif',sizingmethod='scale')">

src为背景图片路径,复制上述代码即可实现背景图片拉伸的效果了。当然,拉伸的图片可能会变形。

这样做有个不好的地方就是放在图片背景上的按钮了什么的控件都不能用了!正在解决!


分享到:
评论

相关推荐

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

    本文将介绍两种实现网页背景图片拉伸的方法,一种通过CSS属性来实现,另一种利用jQuery动态调整图片尺寸。 首先,我们来探讨第一种方法,即使用CSS的`background-size: cover`属性来实现图片的拉伸效果。`...

    用javascript实现背景自动拉伸

    ### 使用JavaScript实现网页背景图片自动拉伸的知识点 在网页设计与开发的过程中,经常会遇到需要对背景图片进行自适应处理的情况。特别是在响应式设计日益普及的今天,如何让背景图片根据不同的屏幕尺寸自动拉伸变...

    网页中随内容增加背景拉伸

    ### 网页中随内容增加背景拉伸 在网页设计与开发中,为了提高用户体验并确保页面美观,经常会遇到需要让背景图像随着内容的变化而动态拉伸的需求。这种技术可以使得网页无论是在不同分辨率的显示器上展示,还是在...

    jQuery+CSS3实现鼠标点击背景图片向上拉伸切换特效源码.zip

    4. **切换图片**:在切换函数中,我们可以使用jQuery的`.css()`方法来改变背景图片的URL,同时利用CSS3的`transform`属性,让图片向上拉伸。例如,可以设置`transform: translateY(-100%);`来实现图片向上移动其自身...

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

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

    css 网页背景图片 怎样用CSS实现大背景网页效果

    其次,如果需要背景图片覆盖整个网页背景,但又不希望图片拉伸变形,可以考虑使用两张图片进行处理。一种方法是设置一个重复的背景图案,用来填充大背景,然后在中间放置一张尺寸较大的图片。通常,中间的大图会被...

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

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

    网页背景素材

    1. **背景图片**:网页背景中常见的是图片,可以是风景、抽象艺术或与网站主题相关的图像。这些图片通常采用平铺、拉伸或居中裁剪等方式来适应不同屏幕尺寸。JPEG、PNG和SVG是常见的图片格式,其中JPEG适合照片,PNG...

    用滤镜实现背景图片的拉伸效果代码

    使用滤镜实现背景图片的拉伸效果是一种较为老旧但有效的方法,尤其适用于早期的IE浏览器。然而,鉴于现代浏览器的发展趋势,这种技术逐渐被CSS3的相关功能所取代,例如CSS3的background-size属性。不过,了解这些老...

    css3实现一个div设置多张背景图片及background-image属性实例演示

    总的来说,CSS3的`background-image`属性及其相关功能,如多背景图片和渐变,为网页设计师提供了强大的工具,使他们能够创造出更具视觉吸引力和创新性的网页布局。通过熟练掌握这些技术,你可以提升网站的整体美学和...

    html5和css3制作不规则的网页背景分割线

    在本项目中,我们将探讨如何使用这两者来创建不规则的网页背景分割线,从而摒弃传统上依赖图片的方法。 首先,HTML5是超文本标记语言的第五个版本,它引入了许多新的元素和API,旨在使网页结构更清晰、语义更丰富。...

    css滚动切换背景图片

    通过合理运用`background-size`、`background-position`等属性,以及可能结合JavaScript,我们可以创造出富有动态感和交互性的网页背景效果。对于压缩包中的`background-attachment-master`,这可能是包含示例代码或...

    CSS3教程(5):网页背景图片

    在CSS3中,网页背景图片的使用方法得到了显著的扩展,为设计师提供了更多创造性的可能性。本教程将探讨如何利用CSS3实现多背景图片以及控制背景图片尺寸,从而提升网页的视觉效果。 首先,让我们来看一下如何设置...

    网页背景全屏

    这是全屏的背景代码~这个不管图片多大尺寸都是满屏,也就是拉伸图片,会变形,你可以设置简单的背景,如斜纹一类的

    CSS3的background-size属性,实现响应式式图片等比例缩放。

    CSS3的`background-size`属性就是实现响应式图片等比例缩放的关键技术之一,它解决了传统方法中图片在不同屏幕尺寸下显示不适应的问题。 `background-size`属性允许我们自定义背景图片的大小,而不仅仅是局限于图片...

    css 设置全屏背景图片

    在网页设计中,为网站设置全屏背景图片是一种常见且重要的设计手段,它能增强用户的第一印象,营造特定的氛围或主题。但是,传统的CSS属性对于背景图片的控制有限,无法直接实现图片的全屏拉伸,仅能通过设置图片...

    CSS实现背景图尺寸不随浏览器缩放而变化的两种方法

    在网页设计中,保持背景图尺寸不随浏览器缩放而变化是一种常见的需求,这有助于保持网站的视觉一致性。本文将详细介绍两种使用CSS实现这一效果的方法。 **方法一:使用`background`属性** 此方法将图片作为元素的...

    网页资源图片

    6. 背景图片:网页背景图片可以通过CSS实现,例如使用background-image属性,可以实现平铺、拉伸、固定定位等多种效果,增强网页设计感。 7. 响应式图片:随着移动设备的普及,响应式设计成为必备。通过媒体查询@...

    jQuery鼠标悬停滑块拉伸特效.rar

    【jQuery鼠标悬停滑块拉伸特效】是一个适用于网页设计的互动效果,它利用了流行的JavaScript库jQuery和CSS样式来实现。此特效的核心在于当用户将鼠标悬停在某一元素上时,该元素会动态地扩展其尺寸,提供一种吸引...

    jquery矩形可拉伸导航.zip

    《jQuery矩形可拉伸导航技术详解》 在前端开发中,导航菜单是网页设计的重要组成部分,它为用户提供直观的页面跳转路径。本篇文章将深入探讨如何利用jQuery实现一个可拉伸的矩形导航,这涉及到HTML5、CSS3以及...

Global site tag (gtag.js) - Google Analytics