网页背景全屏就这？分享 1 段优质 CSS 代码片段！

家好，我是大澈！

本文约 700+ 字，整篇阅读约需 1 分钟。

每日分享一段优质代码片段。

今天分享一段 CSS 代码片段，使用 CSS 设置网页全屏背景图片，很简单。

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！

html {
background: url('images/bg.jpg') no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover; /* 适用于旧版 WebKit 浏览器 */
-moz-background-size: cover; /* 适用于旧版 Firefox 浏览器 */
-o-background-size: cover; /* 适用于旧版 Opera 浏览器 */
}

分享原因

这段代码展示了如何使用 CSS 设置网页全屏背景图片，使其在不同浏览器中都能完美适应屏幕尺寸。

这对于创建具有视觉吸引力且兼容性良好的网页非常重要。

代码解析

1. background: url('images/bg.jpg') no-repeat center center fixed;

background：简写属性，用于设置所有背景属性。

url('images/bg.jpg')：指定背景图像的路径。

no-repeat：背景图像不重复显示。

center center：背景图像在水平方向和垂直方向都居中显示。

fixed：背景图像固定在视口中，即使页面滚动，背景图像也不会移动。

2. background-size: cover;

background-size: cover：使背景图像按比例缩放，以完全覆盖背景区域。这意味着图像可能会被裁剪以适应容器。

3. 浏览器前缀的使用

-webkit-background-size：适用于旧版 WebKit 浏览器（如旧版 Safari 和 Chrome）。

-moz-background-size：适用于旧版 Firefox 浏览器。

-o-background-size：适用于旧版 Opera 浏览器。

这些浏览器前缀用于处理旧版浏览器的兼容性问题。虽然现代浏览器大多已经支持标准的 background-size 属性，但在代码中加入这些前缀可以确保在老旧浏览器中也能正常显示背景图片。

- end -

么是全屏布局

全屏布局就是指 HTML 页面铺满整个浏览器窗口, 并且没有滚动条。而且还可以跟随浏览器的大小变化而变化。

来看下常用的标签列表，后文会一一介绍：

<!DOCTYPE html>

<head>

</head>

基本标签

使用 HTML5 doctype，不区分大小写。

<!DOCTYPE html>

声明文档使用的字符编码

更加标准的 lang 属性写法 http://zhi.hu/XyIa

简体中文
<html lang="zh-cmn-Hans">
繁体中文
<html lang="zh-cmn-Hant">

很少情况才需要加地区代码，通常是为了强调不同地区汉语使用差异，例如：

菠萝和鳳梨其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为黄梨。

优先使用 IE 最新版本和 Chrome

SEO 优化

页面描述

每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。文档

页面关键词

定义页面标题

定义网页作者

定义网页搜索引擎索引方式，robotterms是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。文档

可选标签

为移动设备添加 viewport

content 参数：

width viewport 宽度(数值/device-width)
height viewport 高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增属性（注意：iOS8 中已经删除），可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

iOS 设备

添加到主屏后的标题（iOS 6 新增）

是否启用 WebApp 全屏模式

设置状态栏的背景颜色

content 参数：

default 默认值。
black 状态栏背景是黑色。
black-translucent 状态栏背景是黑色半透明。

如果设置为 default 或 black ,网页内容从状态栏底部开始。

如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

禁止数字识自动别为电话号码

iOS 图标

rel 参数：

apple-touch-icon 图片自动处理成圆角和高光等效果。

apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。

iPhone 和 iTouch，默认 57x57 像素，必须有

iPad，72x72 像素，可以没有，但推荐有

Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有

Retina iPad，144x144 像素，可以没有，但推荐有

iOS 启动画面

官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html

参考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

iPad 的启动画面是不包括状态栏区域的。

iPad 竖屏 768 x 1004（标准分辨率）

iPad 竖屏 1536x2008（Retina）

iPad 横屏 1024x748（标准分辨率）

iPad 横屏 2048x1496（Retina）

iPhone 和 iPod touch 的启动画面是包含状态栏区域的。

iPhone/iPod Touch 竖屏 320x480 (标准分辨率)

iPhone/iPod Touch 竖屏 640x960 (Retina)

iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)

添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）文档

Android

Android Lollipop 中的 Chrome 39 增加 theme-color meta 标签，用来控制选项卡颜色。

http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android

Windows 8

Windows 8 磁贴颜色

Windows 8 磁贴图标

其他

添加 RSS 订阅

添加 favicon icon

禁止 Chrome 浏览器中自动提示翻译

在线咨询

上一篇：推荐50个超实用的 Chrome 扩展，建议收藏
下一篇：HTML5 语法基础二（笔记）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

网页背景全屏就这？分享 1 段优质 CSS 代码片段！

您的项目需求