根据屏幕分辨率设置背景图片 [英] Set background image according to screen resolution

问题描述

我想是能够根据屏幕分辨率来改变我的网页背景图片，用户使用这样：

I would like to be able to change my webpage background image according to the screen resolution the user uses so:

如果屏幕分辨率大于或等于1200 * 600，然后后台= mybackground.jpg不重复否则后果不堪设想。我怎样才能做到这一点？

if screen resolution is greater than or equal to 1200*600 then background = mybackground.jpg no-repeat or else. How can I do this?

推荐答案

这工作得很好纯CSS方式进行了讨论的这里。两种技术研究特别是和我个人preFER第二，因为它不依赖于CSS3，这适合我自己的需要更好。

Pure CSS approaches that work very well are discussed here. Two techniques are examined in particular and I personally prefer the second as it not CSS3 dependent, which suits my own needs better.

如果大多数/所有的流量有一个CSS3功能的浏览器，第一种方法是更快和更清洁的实现（复制/由Zoidberg先生在这里为方便起见，另一种答案粘贴，虽然我参观的the源关于为什么它进一步的背景）。

If most/all of your traffic has a CSS3 capable browser, the first method is quicker and cleaner to implement (copy/pasted by Mr. Zoidberg in another answer here for convenience, though I'd visit the source for further background on why it works).

为CSS的另一种方法是使用JavaScript库jQuery来检测分辨率改变并相应地调整图像的大小。 本文涵盖了jQuery的技术，并提供了现场演示。

An alternative method to CSS is to use the JavaScript library jQuery to detect resolution changes and adjust the image size accordingly. This article covers the jQuery technique and provides a live demo.

超大型是一个专用的JavaScript库，专为静态全屏幕图像，以及全尺寸的幻灯片。

Supersized is a dedicated JavaScript library designed for static full screen images as well as full sized slideshows.

一个很好的提示全屏图像是用正确的比例事先扩展他们。我通常使用supersized.js或1680x1050的其他方法时，设置拍照JPG质量60-80％之间产生了文件大小100KB中或多或少如果可能的区域不影响质量太多瞄准的大小为1500x1000

A good tip for full-screen images is to scale them with a correct ratio beforehand. I normally aim for a size of 1500x1000 when using supersized.js or 1680x1050 for other methods, setting the jpg quality for photographs to between 60-80% resulting in a file size in the region of 100kb or less if possible without compromising quality too much.

这篇关于根据屏幕分辨率设置背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！