css如何设置全屏背景图片
导语:网页背景设置倒不是很难,但是要全屏可控制呢?你还觉得容易吗?以下的是本站小编为大家搜集的用css设置全屏背景图片的实例,希望对你有所帮助。
如果你有一张比较绚烂的图片想做背景,可以这样设置:
代码如下:
body{
background:url(img.jpg);
background-position:center;
background-repeat:no-repeat;
}
但效果很可能会是这样:
图片没有重叠,居中,并且...她太小了,无法占领全部的页面。
很可惜,CSS2中并没有图片全屏拉伸的属性,所以我自己想了个办法。
利用一个p层,在里面装载一个IMG标签。然后设置p和IMG的大小为100%,并固定到屏幕最底层,这样就实现了完美的拉伸并最大化图片的.目的。
首先在Body中加入下面的代码:
代码如下:
<p id="p1"><img src="img.jpg" /></p>
然后加入CSS代码:
p#p1{
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
z-index:-1;
}
p#p1 > img {
height:100%;
width:100%;
border:0;
}
最终效果:
拉伸浏览器、调整网页位置后,图片背景图片依然居中全屏:
火狐狸中的效果:
-
针对dom元素的分析应用
如果这个DOM元素没有样式也就谈不上操作了。2.我们也可以直接用JS动态的向html里写入DOM元素。今天这章我们就讲这两个应用(一)对html里现有的DOM元素进行操作。我上面说了,对现有的DOM元素进行操作,无非就是对样式的操作。所以我们首先就要能获取这个DOM元素的样...
-
ASP.NET新型的投票结果显示方法
一个投票功能模块少不了查看投票结果,用进度条显示各个投票结果可以起到一目了然的效果。以下是我的方法,请大家不吝赐教:1:做一张图片用于做进度条,只需要很小的一个图片就可以了,如高20px,宽1px。2:在要显示进度条的单元格中插入image控件,其imageUrl设置为已做好的...
-
如何理解Javascript的caller,callee,call,apply区别
在提到上述的概念之前,首先想说说javascript中函数的隐含参数:argumentsarguments该对象代表正在执行的函数和调用它的函数的参数。[function.]arguments[n]参数function:选项。当前正在执行的Function对象的名字。n:选项。要传递给Function对象的从0开始的参数值...
-
如何理解Javascript的caller,callee,call,apply区别
在提到上述的概念之前,首先想说说javascript中函数的隐含参数:argumentsarguments该对象代表正在执行的函数和调用它的函数的参数。[function.]arguments[n]参数function:选项。当前正在执行的Function对象的名字。n:选项。要传递给Function对象的从0开始的参数值...