css 设置背景颜色和图片的一些技巧-html教程-PHP中文网

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

WBOY

发布： 2016-06-01 09:53:20

原创

2249 人浏览过

设置背景颜色：

要设置背景颜色，直接使用“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"><!DOCTYPE html> 
<html> 
<head> 
<title>css 设置背景颜色和图片的一些技巧</title> 
<style>
body{background: url("../Public/images/body_bg.jpg") repeat-x rgb(222, 235, 243);} 
</style>
</head> 
<body> 

</body> 
</html></code>

登录后复制

在线运行

2.不规律的图片

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

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

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

登录后复制

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

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程

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