css 设定全屏情况照片

2020-10-26 06:56 jianzhan
假如你有1张较为绚丽的照片想做情况,能够这样设定:

拷贝编码
编码以下:

body{
background:url(img.jpg);
background-position:center;
background-repeat:no-repeat;
}

但实际效果极可能会是这样:

照片沒有重合,垂直居中,而且...她很小了,没法占据所有的网页页面。
很可是,CSS2中并沒有照片全屏拉伸的特性,因此我自身想了个方法。
运用1个DIV层,在里边装载1个IMG标识。随后设定DIV和IMG的尺寸为100%,并固定不动到显示屏底层,这样就完成了完善的拉伸并最大化照片的目地。
最先在Body中添加下面的编码:

拷贝编码
编码以下:

<div id="div1"><img src="img.jpg" /></div>

随后添加CSS编码:

拷贝编码
编码以下:

div#div1{
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
z-index:⑴;
}
div#div1 > img {
height:100%;
width:100%;
border:0;
}

最后实际效果:

 

拉伸访问器、调剂网页页面部位后,照片情况照片仍然垂直居中全屏:

 

火狐狸中的实际效果:


这样,大家完成了固定不动垂直居中且全自动拉伸全屏的情况照片,但是她是1个层,因此当客户在网页页面空白处右键的情况下,显示信息的便是照片的信息内容,这将会会让客户觉得不便捷。
具体上,火狐的拉伸实际效果比IE强许多,会全自动蒙版照片的细节。IE在图象拉伸后的像素点十分不好看,因此提议用高辨别的图象做为情况。

初学者向,高人请具体指导,感谢。

夜闻香原創