<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图设置</title>
</head>
<body>
<div></div>
</body>
</html>
二、添加CSS样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图设置</title>
<style type="text/css">
.box {
width: 700px
height: 350px
margin: 0 auto
background: url(pic.jpg) no-repeat center
}
</style>
</head>
<body>
<div></div>
</body>
</html>
三、html+css最终在浏览器显示的效果：
不是阿 只要是常见图片就可以常见的如下
BMP：Windows 位图
Windows 位图可以用任何颜色深度（从黑白到 24 位颜色）存储单个光栅图像。Windows 位图文件格式与其他 Microsoft Windows 程序兼容。它不支持文件压缩，也不适用于 Web 页。从总体上看，Windows 位图文件格式的缺点超过了它的优点。为了保证照片图像的质量，请使用 PNG 文件、JPEG 文件或 TIFF 文件。BMP 文件适用于 Windows 中的墙纸。
优点： BMP 支持 1 位到 24 位颜色深度。BMP 格式与现有 Windows 程序（尤其是较旧的程序）广泛兼容。
缺点： BMP 不支持压缩，这会造成文件非常大。BMP 文件不受 Web 浏览器支持。
PNG：可移植网络图形
PNG 图片以任何颜色深度存储单个光栅图像。PNG 是与平台无关的格式。
优点： PNG 支持高级别无损耗压缩。PNG 支持 alpha 通道透明度。PNG 支持伽玛校正。 PNG 支持交错。PNG 受最新的 Web 浏览器支持。
缺点： 较旧的浏览器和程序可能不支持 PNG 文件。作为 Internet 文件格式，与 JPEG 的有损耗压缩相比，PNG 提供的压缩量较少。作为 Internet 文件格式，PNG 对多图像文件或动画文件不提供任何支持。GIF 格式支持多图像文件和动画文件。
JPEG：联合摄影专家组
JPEG 图片以 24 位颜色存储单个光栅图像。JPEG 是与平台无关的格式，支持最高级别的压缩，不过，这种压缩是有损耗的。渐近式 JPEG 文件支持交错。可以提高或降低 JPEG 文件压缩的级别。但是，文件大小是以图像质量为代价的。压缩比率可以高达 100:1。（JPEG 格式可在 10:1 到 20:1 的比率下轻松地压缩文件，而图片质量不会下降。）JPEG 压缩可以很好地处理写实摄影作品。但是，对于颜色较少、对比级别强烈、实心边框或纯色区域大的较简单的作品，JPEG 压缩无法提供理想的结果。有时，压缩比率会低到 5:1，严重损失了图片完整性。这一损失产生的原因是，JPEG 压缩方案可以很好地压缩类似的色调，但是 JPEG 压缩方案不能很好地处理亮度的强烈差异或处理纯色区域。
优点： 摄影作品或写实作品支持高级压缩。利用可变的压缩比可以控制文件大小。支持交错（对于渐近式 JPEG 文件）。JPEG 广泛支持 Internet 标准。
缺点：有损耗压缩会使原始图片数据质量下降。当您编辑和重新保存 JPEG 文件时，JPEG 会混合原始图片数据的质量下降。这种下降是累积性的。JPEG 不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。
GIF：图形交换格式
GIF 图片以 8 位颜色或 256 色存储单个光栅图像数据或多个光栅图像数据。GIF 图片支持透明度、压缩、交错和多图像图片（动画 GIF）。GIF 透明度不是 alpha 通道透明度，不能支持半透明效果。GIF 压缩是 LZW 压缩，压缩比大概为 3:1。GIF 文件规范的 GIF89a 版本中支持动画 GIF。
优点： GIF 广泛支持 Internet 标准。支持无损耗压缩和透明度。动画 GIF 很流行，易于使用许多 GIF 动画程序创建。
缺点：GIF 只支持 256 色调色板，因此，详细的图片和写实摄影图像会丢失颜色信息，而看起来却是经过调色的。 ·在大多数情况下，无损耗压缩效果不如 JPEG 格式或 PNG 格式。 GIF 支持有限的透明度，没有半透明效果或褪色效果（例如，alpha 通道透明度提供的效果）。
可以看出GIF格式的图片在网络共享方面有很大优势,所以最常用的也就是他了
但不仅仅是他
1、设置背景图片只需在css样式中设置backgroud-image属性：
<style type="text/css" >
body{
background-image:url(你的图片地址)
background-position:center
background-repeat:repeat-y；
}
</style>
2、其中， background-image:url(你的图片地址)表示背景图片的存放路径；
background-position:表示的是背景图片的位置，主要有top(上)、bottom（下）、left(左)、right(右)这四个取值；
background-repeat:表示的图片的平铺方式。默认情况是平铺，一般设置为no-repeat,表示的是不平铺。
背景颜色属性(background-color)：
这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性。
body {background-color:#99FF00}：
上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。
演示示例
背景图片属性(background-image)：
这个属性为HTML元素设定背景图片，相当于HTML中background属性。
<body style="background-image:url(../images/css_tutorials/background.jpg)">
上面的代码为Body这个HTML元素设定了一个背景图片。
演示示例
背景重复属性(background-repeat)：
这个属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片既横向重复，又竖向重复。
repeat-x 背景图片横向重复；
repeat-y 背景图片竖向重复；
no-repeat 背景图片不重复；
body {background-image:url(../images/css_tutorials/background.jpg)background-repeat:repeat-y}
上面的代码表示图片竖向重复。
演示示例
背景附着属性(background-attachment)：
这个属性和background-image属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。这个属性有两个值，一个是scroll，一个是fixed。缺省值是scroll。
body {background-image:url(../images/css_tutorials/background.jpg)background-repeat:no-repeatbackground-attachment:fixed}
上面的代码表示图片固定不动，不随内容滚动而动。
演示示例
背景位置属性(background-position):
这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。
body {background-image:url(../images/css_tutorials/background.jpg)background-repeat:no-repeatbackground-position:20px 60px}
上面的代码表示背景图片的初始位置距离网页最左面20px，距离网页最上面60px。
演示示例
背景属性(background):
这个属性是设置背景相关属性的一种快捷的综合写法， 包括background-color, background-image, background-repeat, backgroundattachment, background-position。
body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px}
上面的代码表示，网页的背景颜色是翠绿色，背景图片是background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）