网页背景设置的方法总结

网页背景设置的方法总结

---

本文会列出网页背景设置的三种方法，在目前学习初期看来，基本覆盖了所有需求，并且提供一些优秀的资源网站，方便图片的查找。

---

根据需求不同，我将网页背景设置分为三种：
1. 直接单纯设置背景色，以颜色为背景；
2. 采用小图片、纹理进行重复排列；
3. 采用大图，图片设置为整个网页背景。

---

一、简单的背景颜色设置

CSS代码：
body {
background-color: #000000;
}
这部分就不过多介绍了，都很容易。给两个查找颜色的网站，只要和颜色有关系，基本这两个网站都能满足：
- RGB颜色查询对照表：http://www.114la.com/other/rgb.htm
- 知道代码可以查颜色：http://www.colorhexa.com/

二、重复排列的背景

比如，这是一个小的黑色机器人图片模块儿，经过背景设置后可以实现全屏幕重复，效果也不错。

这里CSS代码也很简单：
body
{
background-image: url(robots.png);
background-repeat: repeat;
}
url后面写上自己图片的地址即可。也可以只是单方向重复，可以
background-repeat: repeat -y;
background-repeat: repeat -x;
这种背景的好处是图片小，加载速度快，同时有一定的美观性。
提供一些不错的小纹理的网站，一些漂亮的小图片重复排布也是很漂亮的：
- http://backgroundlabs.com/
- http://bgrepeat.com/
- http://supernovathemes.com/55-small-lite-background-images-for-website-you-can-repeat/

图片全屏背景设置

这是大家最常用，最个性化的设置背景方式
首先列出背景图片的资源：
- http://wallpaperswide.com/
- http://cn.freeimages.com/
- https://unsplash.com/

 

CSS代码: 

div#div1{ 

    position:fixed; 

    top:0; 

    left:0; 

    bottom:0; 

    right:0; 

    z-index:-1; 

} 

div#div1 > img { 

    height:100%; 

    width:100%; 

    border:0; 

}         

HTML代码：

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

这是一段非常简洁的全屏幕背景设置代码，大家可以试一下，在改变浏览器界面大小的情况下，图片大小也会自适应，非常好用。而网上同时还有很多方法，但是感觉都有瑕疵，比如这个JQUERY插件的方法：http://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/
大家可以改变浏览器大小的情况看看，发现背景失真，浏览器变小的情况下，背景图片智能部分被显示。
http://www.shejidaren.com/full-background-web-designs.html
https://css-tricks.com/perfect-full-page-background-image/
这两个网址里也介绍了几种方法，大家可以尝试，我都进行可测试，最终选择了我文中的代码，比较简介，符合自适应的需求。
同时再附上几个全屏背景下优秀网站的例子：
http://colossalmedia.com/
搁置了好几天才记录背景设置的学习过程，很多好的资源都忘记了，以后记起来的话会慢慢补上的。