简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

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

WBOY
Release： 2016-06-21 09:47:49
Original
1643 people have browsed it

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>
Copy after login

用这样的

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


图片地址


Related labels：
html背景图片过大时显示问题，求助
source：php.cn
Previous article：html table中的单元格的跳动方向设置_html/css_WEB-ITnose Next article：没有找到的图片,可以用什么方法，统一同其他图片来替换_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
The question is still the same, but the title is rewritten as follows: My Javascript random function fails to generate valid responses I'm making a simple random number generator game using JS and HTML. In this game you can s...
From 2024-04-03 22:03:14
0
1
275
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！