css 全屏显示一张图片_css如何设置全屏背景图片

css如何设置全屏背景图片

导语：网页背景设置倒不是很难，但是要全屏可控制呢？你还觉得容易吗？以下的是百分网小编为大家搜集的用css设置全屏背景图片的实例，希望对你有所帮助。

如果你有一张比较绚烂的图片想做背景，可以这样设置：

代码如下：

body{

background:url(img.jpg);

background-position:center;

background-repeat:no-repeat;

}

但效果很可能会是这样：

图片没有重叠，居中，并且...她太小了，无法占领全部的页面。

很可惜，CSS2中并没有图片全屏拉伸的属性，所以我自己想了个办法。

利用一个p层，在里面装载一个IMG标签。然后设置p和IMG的大小为100%，并固定到屏幕最底层，这样就实现了完美的拉伸并最大化图片的.目的。

首先在Body中加入下面的代码：

代码如下：

然后加入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;

}

最终效果：

拉伸浏览器、调整网页位置后，图片背景图片依然居中全屏：

火狐狸中的效果：

【css如何设置全屏背景图片】相关文章：

css 全屏显示一张图片_css如何设置全屏背景图片相关推荐

css 全屏显示一张图片_css 如何让图片全屏的问题
1:一个很小的条状图,通过repeat后,形成一个很规则的大图背景. 但是css3出现以后,这个情况被改善了.background-size 属性可以让我们之前的希望成真.而且这个属性在firefox ...
【CSS】滑动门技术 ( 借助 CSS 精灵技术实现 | 外部标签设置左半部分背景图片 | 内部标签设置右半部分背景图片 | 鼠标经过更换背景 | 代码示例 )
文章目录一.滑动门技术 1.滑动门技术借助 CSS 精灵技术实现 2.外部标签设置左半部分背景图片 3.内部标签设置右半部分背景图片 4.鼠标经过时更换背景二.完整代码示例一.滑动门技术 1.滑 ...
[css] 如何使用css3实现一个div设置多张背景图片？
[css] 如何使用css3实现一个div设置多张背景图片? background-image:url("1.jpg"),url("2.jpg"),url(&q ...
iOS设置UITableView的背景图片，以及不显示多余的空Cell
2019独角兽企业重金招聘Python工程师标准>>> 设置UITableView的背景图片: UIImageView *imageView=[[UIImageView alloc] ...
CSS渐变颜色和浏览器前缀、opacity透明度以及设置多个背景图片写法
目录前言一.多个背景图片二.渐变颜色 1.线性渐变 2.径向渐变 3.浏览器前缀 4.opacity透明度写在最后前言在前面说了CSS怎样设置背景图片,与设置颜色的几种方式.如果你想查看可 ...
css 全屏显示一张图片_css3背景图片全屏显示的例子
背景图片全屏这个功能只需要定义重复即可解决了当然这个是有一些技巧了,下面我们就来看一篇关于css3背景图片全屏显示例子了,具体的如下所示. 如何用css背景图片拉伸以及100% 满屏显示呢?这个问题 ...
ubuntu java 全屏显示_java 在ubuntu下实现全屏，上面的状态栏依然显示。如下图，不想要上面的状态栏...
源代码://-------------------------------------TestLogIn类importjavax.swing.*;importjava.awt.*;publicclas ...
mac多开屏幕_Mac系统如何实现多屏显示画面？让Mac系统多屏显示画面的设置方法...
我们都知道,电脑可以多屏显示的,实现一个屏幕玩游戏,另一个屏幕工作,实现工作娱乐两不误.有时候一个显示器需要不停的切换使用不是很方便,那么Mac系统如何实现多屏显示画面?初学者不太懂得怎么设置,网上教 ...
计算机蓝屏显示的英文是什么,电脑蓝屏时会出现一堆英文，你知道是什么意思吗？...
原标题:电脑蓝屏时会出现一堆英文,你知道是什么意思吗? 很多人在使用电脑的时候都会遇到蓝屏的现象,相信很多人在这个时候都有想砸掉电脑的冲动.当然,大部分情况下大家还是会选择强制关机,然后重启. 几乎完 ...

css 全屏显示一张图片_css如何设置全屏背景图片

css 全屏显示一张图片_css如何设置全屏背景图片相关推荐

最新文章

热门文章