css2如何设置全屏背景图片】的更多相关文章

每次在做一个网站后台登陆页面的时候,当UI给我一张背景是不规律的背景图片,但是在设置为背景时,总会遇到屏幕大小的问题,导致背景图片有可能平铺.这样UI的效果达不到也会很难看. 本来我想用body{background: url(img.jpg) no-repeat top center;}的办法来拉伸的,但是在360的兼容模式浏览器就不行了.因为这是CSS3的属性.而CSS2本身没有这个属性,那怎么办呢?! 可以利用一个DIV层,在里面装载一个IMG标签.然后设置DIV和IMG的大小为100%,…
<div id="div1"><img src="img.jpg" /></div> div#div1{ position:fixed; top:0; left:0; bottom:0; right:0; z-index:-1; } div#div1 > img { height:100%; width:100%; border:0; }…
在CSS中背景图片的填充方法: background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-repeat:repeat-x(水平方向平铺) background-repeat:repeat-y(垂直方向平铺) 主要是css样式: *{ margin:; padding:; } html{ /* This image will be displayed fullscreen */ backgrou…
效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <ti…
<head><style type="text/css"> #bg { position:fixed; top:; left:; width:100%; height:100%; } #bg img { position:absolute; left:; right:; bottom:; margin:auto; width:100%; height:100%; z-index:-1; } </style> </head> <bod…
在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕,不留空白区域 保持图像的纵横比(图片不变形) 图片居中 不出现滚动条 多浏览器支持 以图片bg.jpg为例 最简单,最高效的方法 CSS3.0 归功于css3.0新增的一个属性background-size,可以简单的实现这个效果,这里用fixed和center定位背景图,然后用background-size来使图片铺满,具体css如下 -webkit-background-si…
.bgimg{ width: 100%; height: 95vh; margin: 0; padding: 0 .32rem; background-image: url('../image/ld.jpg'); background-repeat: no-repeat; background-size: 100% 100%; position: relative; bottom: 0; left: 0; right: 0; }…
引子 不管是Android还是iOS平台中,都可以看到一些应用在启动的时候会先出现一个启动画面(Splash Activity),如QQ.微信等.这个启动画面中往往会将ActionBar和Status Bar隐藏掉,然后用户进入一种沉浸的状态,形成更强烈的视觉冲击.一方面,这可以给用户留下更深刻的使用体验,从而产生一定品牌效应:另一方面,也给应用的启动初始化留下了充裕的时间,避免因为启动时间过长而给用户留下不良的印象.因此,全屏显示在手机应用中得到了广泛的应用.那么这篇博客中就记录下全屏显示的一…
动态网站通常利用背景图像或预加载屏幕,以保证所有资源都加载到页面上,在浏览器中充分呈现.现在很多网站都炫耀自己的图像作为背景图像全屏背景,追溯到旧的Flash网站却用自己的方式在HTML资源重布局. 本综述我们列出15最好的jQuery全屏背景图像的插件,可以帮助你增加你的图像到您的网站,让他们看起来惊人的美丽.这个插件创建一些华丽的背景,幻灯片,你的网站让他们美丽的动画和过渡. 1. MaxImage maximage 2.0是一个全屏背景slideshow utilizes jQuery的插…
吐槽啦:Yeah  明天就是国庆了o(* ̄▽ ̄*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言归正传,我们回到我们的主题来看看CSS之全屏背景图.Nowdays,满屏大图的网页成为了一种fashion,网页的模板.布局是用CSS.HTML……来设计的,这里就以CSS来聊全屏背景图. 简单点,对于全屏背景图,我们只需用CSS的一个background-size属性就可以了. 当backgrou…