html背景图片过大时显示问题,求助_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 09:47:49
Original
1643 Leute haben es durchsucht

css html 背景图片 不同分辨率 自适应

情况是这样的,老板给了一张效果图,大小是2186 x 1059的,现在老板的需求是,当屏幕分辨率较小的时候,只显示中间不主要内容,但当屏幕分辨率较大,根据分辨率显示跟着变大

回复讨论(解决方案)

设置background为center

你试试写两个div层,设置效果图的top,left为动态的,当分辨率小时,利用其中一个层将超出的部分遮罩起来,具体的top,left为多少 个人认为需要你的分辨率范围去计算了

叫老板去死吧。。。

叫老板去死吧。。。 这也太牛了

设置background为center
这样就行了~~background-position: center top

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>div,body,html {margin:0;width:100%;height:100%}.main{background:url(http://news.mydrivers.com/img/20080628/07552404.jpg) no-repeat; background-position:top center;}</style></head><body><div class="main"></div></body></html>
Nach dem Login kopieren

用这样的

楼上几个办法都不错,作为背景实现,还可以用下面方法实现:
css:
.div{ position:relative; width:1000px;}
.div2{ position:absolute; left:-593px; top:0px;}
html:


图片地址


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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!