css 设置背景颜色和图片的一些技巧

设置背景颜色：

要设置背景颜色，直接使用“background:颜色值;”即可。如：

<code class="language-css">body{background:#000} </code>

将body的背景颜色设置为黑色。

 

设置背景图片：

1.规律背景图片。

不如我们要设置一个渐变的背景图片，这种背景只需要切出1像素宽，高度合适的图片作为背景即可。

<code class="language-css">body{background: url("../images/body_bg.jpg") repeat-x rgb(222, 235, 243);} </code>

实例：

<code class="language-html"> 
 
 
<title>css 设置背景颜色和图片的一些技巧</title> 
<style>
body{background: url("../Public/images/body_bg.jpg") repeat-x rgb(222, 235, 243);} 
</style>
 
 

 
</code>

在线运行

 

2.不规律的图片

常常看到一些专题或形象网页，背景是一种非常大图片作为背景，而通常情况下宽屏和窄屏显示器都能显示铺满的全屏背景图片，就像图片能自适应宽度大小一样的。其实这种实现一样非常简单，将这张图片宽度美工设计足够大，比如市场上最宽显示屏分辨率宽度为2560像素，那么要让这样的宽屏显示器浏览此网页也能铺满全屏，那么你的这张背景图片就必须做成宽度大于或等于2560px宽度的，这样以来宽屏、窄屏显示器打开此网页都能铺满全屏，最小化、最大化、改变浏览器窗口打开背景图片都是全屏的居中的看上去就像背景图片自适应大小一样。

关键：全屏自适应背景图片关键是图片做足够宽，以最宽分辨率显示屏能都铺满，小分辨率自然就更是铺满。同时需要设置这样背景图片作为body背景后需要居中。

<code class="language-css">body{background: url(bg.jpg) no-repeat center 0}</code>

代码解释：设置这个图片为网页背景，通常不平铺（no-repeat），水平居中，靠上显示