怎样使背景图片占据整个屏幕?_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:07:55
Original
1345 Leute haben es durchsucht

(今天在知乎上答了这题,直接把自己的答案搬过来了.....)

一直在关注这个问题(其实是因为压根就是初学者.....

就现在了解有几种方法:

①CSS处理方法(仅IE)

#backGroundImg {  background-image: url("X.png");  background-repeat: no-repeat;  filter:progid:dximagetransform.microsoft.alphaimageloader(src='X.png', sizingmethod='scale');/*加上这个,详细可Google*/}
Nach dem Login kopieren

 

②把背景图片做的足够大;
一般情况下,我们设计给我的图都是1440*900的极限,然后居中显示就会适应大部分的屏幕了。可是现在显示器越来越大,加上Mac下Retina屏超高分辨率的虐待...当分辨率超过背景图大小时,边上就会变成背景色了。
所以最直观的方法就是将背景图的大小,翻倍,翻倍,再翻倍....只要超过主流浏览器最大分辨率就好了。
不过弊端很明显,过大的图片会极大的影响网页的加载速度。

③用Js/jQuery控制大小(这其实是种假象的背景自适应)
利用加入个怎样使背景图片占据整个屏幕?_html/css_WEB-ITnose标签,将z-index设置的低一些,然后用Js/jQuery监视窗口大小,然后改变图片的长宽就好了。(详细Google)
不过,这种方法,当图片被拉伸或压缩的过于严重的时候会非常可怕的.....
而且,如果屏蔽右键功能会很蛋疼;不屏蔽右键功能就露怯了。

④利用怎样使背景图片占据整个屏幕?_html/css_WEB-ITnose元素自适应。
这个其实和③差不多,如果是整个网页的背景,在起始

后马上加上怎样使背景图片占据整个屏幕?_html/css_WEB-ITnose然后将CSS设置
width:100%;
height:100%;
这样,图片就会随着浏览器的放大缩小自动缩放了。弊端也和③差不多。
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage