`
黑色_幽默
  • 浏览: 1951 次
  • 性别: Icon_minigender_1
最近访客 更多访客>>
社区版块
存档分类
最新评论

html背景图片全屏效果的方式

阅读更多
网上查了很多关于如何全屏的,最搓的平铺,还有的则用滤镜....

这里我提供一个我个人比较喜欢的解决方案

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


该方法适用于的浏览器:
Safari 3+
Chrome 任意版本
IE 9+
Opera 10+
Firefox 3.6+


此处有一个缺憾,对于国内这种动不动就IE的人你伤不起,所以我们还是要针对IE做一个解决方案

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";


注:IE的解决方案少部分在使用的时候出现了一些导致页面挂掉的情况。
分享到:
评论

相关推荐

    jquery网页图片全屏背景效果实例源码

    这段代码中的`adjustFullScreenBackground`函数确保了背景图片始终与窗口大小同步,以保持全屏效果。同时,当用户改变浏览器窗口大小时,会自动调整背景图片的尺寸。 值得注意的是,`background-size: cover`属性...

    JS图片背景全屏代码

    首先,我们要理解HTML、CSS和JavaScript在构建全屏背景图片中的作用。HTML是页面的结构,CSS用于样式化,而JavaScript则可以增加交互性。在这个场景下,CSS通常用来设置图片的大小和位置,使其适应不同的屏幕尺寸,...

    jquery网页图片全屏背景效果

    CSS部分,我们设定该`div`占据整个视口,并设置背景图片的填充方式为“cover”,确保图片始终充满屏幕: ```css #fullscreen-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; ...

    HTML5实现的全屏图片展示效果

    在现代网页设计中,全屏背景图片或者轮播图已经成为一种流行趋势,它能够给用户带来强烈的视觉冲击力,提升品牌形象。这种全屏图片展示效果通常包括以下几个关键组成部分: 1. **响应式设计**:由于现在用户使用的...

    随机全屏显示的Flash背景图片源文件

    这对于开发者来说,意味着拥有更高的自定义程度和灵活性,可以根据需要对背景图片的展示方式做出个性化调整。 其次,“Flash素材”通常指的是用于制作Flash内容的各种元素,如图形、动画片段、按钮等。在这个压缩包...

    jquery点击图片全屏效果

    在实现图片全屏效果时,jQuery的便捷性和灵活性使其成为首选工具。 首先,我们需要在页面中引入jQuery库。这可以通过CDN(内容分发网络)链接或者本地文件引用来完成。例如,可以使用Google的CDN服务: ```html ...

    jquery自动缩放渐变全屏背景图片代码下载.zip

    在这个“jquery自动缩放渐变全屏背景图片代码下载.zip”压缩包中,我们关注的是一个利用jQuery实现的特殊效果,即全屏背景图片的自动缩放和渐变效果。这个功能通常用于提升网站的视觉吸引力,尤其是在设计现代、简洁...

    jquery全屏背景图片切换效果.zip

    为了实现全屏效果,我们可以设置`#fullscreen-bg`的宽度和高度为`100%`,并使用CSS3的`background-size`属性来使背景图片铺满整个容器。例如: ```css #fullscreen-bg { position: fixed; top: 0; left: 0; ...

    jquery始终适应全屏背景图片切换效果.zip

    标题中的“jquery始终适应全屏背景图片切换效果.zip”指的是一个使用jQuery库实现的全屏背景图片切换功能的代码示例。这个项目可能是一个网页模板或者一个特效组件,旨在为网站提供动态且自适应的全屏背景图片展示,...

    jquery 全屏背景切换效果

    实现全屏背景切换,我们首先要设置一个全屏的HTML元素,通常是body或者一个特殊的div,用于承载背景图片。接下来,利用jQuery,我们可以编写JavaScript代码来动态改变这个元素的背景图片。这通常涉及到定时器(如...

    banner图片全屏效果.

    在网页设计中,"Banner图片全屏效果"是一种常见的视觉表现手法,用于吸引用户的注意力并增强网站的整体美感。这种效果通常应用于网站的首页或者重要的页面模块,以展示品牌特色、产品亮点或者活动信息。下面我们将...

    html5全屏3D效果圣诞雪花飘洒效果 v1.0

    `images`文件夹通常包含项目中使用的图像资源,如在这个场景中,`001.jpg`和`002.jpg`可能是用于增强背景视觉效果的雪景图片。这些图片可能会被设置为背景图,通过CSS的`background-image`属性应用到适当元素上,以...

    html5全屏响应式背景图片导航菜单特效

    HTML5全屏响应式背景图片导航菜单特效是现代网页设计中的一个重要组成部分,它结合了HTML5的新特性、响应式布局以及吸引人的视觉效果,旨在提供一个流畅且适应各种设备的用户体验。下面将详细阐述这个主题涉及的知识...

    jQuery响应式全屏背景图片导航菜单特效.zip

    总的来说,实现"jQuery响应式全屏背景图片导航菜单特效"需要结合HTML、CSS和jQuery的知识。通过精心设计和编程,我们可以创造出既美观又实用的导航菜单,提升用户体验。在实际项目中,可以参考提供的压缩包文件,...

    html5全屏背景图片放大切换幻灯片特效

    HTML5全屏背景图片放大切换幻灯片特效是一种在网页设计中常见的动态效果,它能够为网站增添视觉吸引力,提高用户体验。此特效充分利用了HTML5的新特性,如`<canvas>`元素、CSS3动画和JavaScript API,使得背景图片...

    HTML5 SVG全屏背景图片切换.zip

    在这个"HTML5 SVG全屏背景图片切换"项目中,开发者利用SVG的这一特性来实现全屏背景的动态切换。SVG不仅支持静态图形,还能包含动画元素,使得背景图片的切换更为流畅和吸引人。这通常通过JavaScript库如TweenMax.js...

    网页全屏显示图片效果

    为了实现全屏图片显示,我们需要在HTML中创建一个大尺寸的`<img>`标签或者使用`<div>`标签配合CSS背景图片属性来放置图片。例如: ```html ('images/your-image.jpg')"> ``` 2. CSS 样式: - `css`目录下的文件...

    jquery+css3实现图片背景全屏左右图片切换效果

    在网页设计中,创建引人入胜的用户体验是至关重要的,而全屏背景图片切换效果是一种常见的视觉增强手法。本文将深入探讨如何使用jQuery和CSS3来实现这一功能,为用户提供流畅、美观的图片切换体验。 首先,让我们...

    JQUERY制作的全屏背景投影效果的图片相

    在网页设计中,全屏背景图像可以为网站增添强烈的视觉冲击力,使...通过`index.html` 文件的结构、`css` 文件夹的样式以及`jquery.easing.1.3.js` 插件的动画功能,可以创建出一个具有视觉吸引力的全屏背景图片相册。

    js全屏动态背景图片.rar

    在JavaScript(JS)中创建全屏动态背景图片是一种常见的网页设计技术,它可以为网站增加视觉吸引力,提升用户体验。本文将详细讲解如何利用JS实现这样的效果,以及涉及的相关知识点。 首先,全屏背景图通常指的是...

Global site tag (gtag.js) - Google Analytics