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

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

php中文网

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

原创

2515人浏览过

设置背景颜色：

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

body{background:#000}

登录后复制

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

设置背景图片：

立即学习“前端免费学习笔记（深入）”；

1.规律背景图片。

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

body{background: url("../images/body_bg.jpg") repeat-x rgb(222, 235, 243);}

登录后复制

实例：

剪小映

记录美好智能成片，AI智能视频剪辑

902

查看详情

<!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>

登录后复制

在线运行

2.不规律的图片

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

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

body{background: url(bg.jpg) no-repeat center 0}

登录后复制

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

大家都在看：

HTML如何打出书名号《》_特殊符号编码方法【教程】 html5怎么放大搜索_html5用CSS transform:scale放大搜索框或按钮【放大】 jimdo怎样用html5做折叠菜单_jimdo折叠菜单html5实现与展开动画【步骤】 html5怎么插入带注释的文档_html5注释显示与隐藏控制【方法】 html5表格怎么建立_HT5用table加tr/td/th标签建立行列数据表格【建立】