【CSS】整屏大背景

1. 利用div的层次,设置底层div充满屏幕,并给div设置背景图

<div id="Layer1" style="position:absolute;top:0;width:100%; height:100%; z-index:-1">
  <img src="resources/um/img/um_bg_1.jpg" height="100%" width="100%"/>
</div>



2. 利用body元素

body{background:url no-repeate center position red ; background-size:cover};

body{background:url no-repeate center position red ; background-size:contain};

background-size:cover    背景图片充满整个容器,不考虑是否看到完整图片

background-size:contain  背景图片充满整个容器,并出现完整图片

background-size:200px 100px;  数值表示方式

background-size:30% 60%;  百分比表示方式

background-size:auto;    以图片自身大小来填充元素,即auto值



3. js 获取屏幕宽高,设置img 宽高



4. 使用滤镜

body{ 
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘/skin/v2011/images/body.png‘,sizingMethod=‘scale‘);
  background-repeat: no-repeat; 
  background-positon: 100%, 100%; 
}



5. 图片自动适应浏览器大小  - 待验证

img.source-image {
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
}



http://liyunpeng.iteye.com/blog/2101956



【CSS】整屏大背景

时间: 2024-07-31 06:20:28

【CSS】整屏大背景的相关文章

DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位教程案例

div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css sprites实例篇 css sprites拼合背景图片素材实现布局效果截图 一.什么是css sprites   -   TOP css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景.这样做的好处也是显而易见的,因为图片多的话,会增加

(4)关于整屏滚动的一些想法

一,其中元素的尺寸大小 html结构: <html> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html> css中,关于关于整屏滚动百分比尺寸,很重要的一点: html,body,ul,ul li{wi

IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总

http://www.jb51.net/css/85640.html 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1:li边距“无故”增加  任何事情都是有原因的,li边距也不例外.  先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是由于其低级元素ul的paddi

CSS之全屏背景图

吐槽啦:Yeah  明天就是国庆了!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言归正传,我们回到我们的主题来看看CSS之全屏背景图.Nowdays,满屏大图的网页成为了一种fashion,网页的模板.布局是用CSS.HTML……来设计的,这里就以CSS来聊全拼背景图. 简单点,对于全屏背景图,我们只需用CSS的一个background-size属性就可以了. 当background-size的值

css sprite实例

css sprite直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.本文章向码农们介绍css sprite使用方法和基本使用实例,需要的码农可以参考一下. 一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景.这样做的好处也是显而易见的,因为图片多的话,会增加http的请求,无疑促使了网

整屏滚动

最近一周写了一个pc端自适应的下载推广页面. 第一次做自适应的页面,在此记录一些体会. 首先我拿到的AI设计图纸是1920*1080的分辨率的. 和普通的定宽页面相比,在自适应的页面中,宽度设定为100%,高度需要通过js调节,通过获取视口的高度.再为每一个整屏页面赋值.在项目中我设定页面的最小高度为600px.pc端大概也没有分辨率低于这个数字的了吧. var height = window.innerHeight || document.documentElement.clientHeigh

CSS clip:rect矩形剪裁功能及一些应用介绍

CSS clip:rect矩形剪裁功能及一些应用介绍 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1565 一.长话短说 CSS中有一个属性叫做clip,为修剪,剪裁之意.配合其属性关键字rect可以实现元素 的矩形裁剪效果.此属性安安稳稳地存在于CSS2.1中,且使用上基本上没有类似于max-height/display:table-cell等浏览器 的兼容性问

(转载)使用Slip.js快速创建整屏滑动的手机网页

现在滑屏网页越来越多,比如我在搜狐视频就做了好几个,举个例子,可以用手机扫描以下的二维码访问: 之前写这样的页面可能还要纠结选择什么库,然后再写一堆touch的事件,再加上写样式写HTML,可能几个小时就这么过去,才算完成. 现在不一样了. 有了Slip.js,你只管写HTML,CSS,如果逻辑简单,一行JS代码就可以搞定,大大提升了开发的效率.不吹牛,上面的demo,不到半小时我就写好了. 具体怎么做呢?比如有个需求是: 我们有4个页面,每个页面有一张图片,每次手指滑动都切换一整屏. 首先看H

前端开发:CSS 初级和高级指南

CSS 初级和高级指南: 没有就不能活的 53 个 CSS 技术 对新手实用的 20 个 CSS 建议 快速编写更好 CSS 代码的 5 种方法 50+ 个 CSS 创意案例和教程 101 个 CSS 小贴士.教程和范例 CSS 代码片段:15 个邪恶的技巧 15 个必学的 CSS 技巧 8 个 CSS 链接 链接小贴士 8 个超简洁 CSS 小贴士 为更好的 CSS 代码:70 个专家级点子 30+ CSS 速查表和快速指南 CSS 大师的 10 个原则 10 个优秀的 CSS 教程和技巧 5