HTML边距和背景图片的设置


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css属性</title>


    <style>
        <!-- p{ -->
            <!-- color: #FF0000; -->
            <!-- font-size: 30px; -->
            <!-- text-align: center; -->
            <!-- line-height: 200px; -->
            <!-- /* -->
                <!-- border 边框 -->
             <!-- */ -->
            <!-- border: 1px solid red; -->

        <!-- } -->
        div{
            border: 1px solid red;
            /*
                尺寸
             */
            height: 1482px;
            width: 1000px;
            /*
                背景
             */
            background: url("image/1.jpg") no-repeat center;
        }
		p{
			color:red;
			font-size:13px;
			font-family:'楷体';
		}
    </style>
</head>
<body>
	<!-- <p>你好</P> -->
    <div><p>你是我得不到的女孩</p>
  </div>
</body>
</html>

SS 背景属性用于定义HTML元素的背景。

CSS 属性定义背景效果:

background-color
background-image
background-repeat
background-attachment
background-position

背景颜色

background-color 属性定义了元素的背景颜色.

页面的背景颜色使用在body的选择器中:

实例

body {background-color:#b0c4de;}

CSS中，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
颜色名称 - 如："red"

以下实例中, h1, p, 和 div 元素拥有不同的背景颜色:

实例

h1 {background-color:#6495ed;}

p {background-color:#e0ffff;}

div {background-color:#b0c4de;}

背景图像

background-image 属性描述了元素的背景图像.

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

页面背景图片设置实例:

实例

body {background-image:url('paper.gif');}

尝试一下 »

下面是一个例子是一个糟糕的文字和背景图像组合。文本可读性差:

实例

body {background-image:url('bgdesert.jpg');}

背景图像 - 水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示:

实例

body

{

background-image:url('gradient2.png');

}

如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:

实例

body

{

background-image:url('gradient2.png');

background-repeat:repeat-x;

}

背景图像- 设置定位与不平铺

让背景图像不影响文本的排版

如果你不想让图像平铺，你可以使用 background-repeat 属性:

实例

body

{

background-image:url('img_tree.png');

background-repeat:no-repeat;

}

以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。

可以利用 background-position 属性改变图像在背景中的位置:

实例

body

{

background-image:url('img_tree.png');

background-repeat:no-repeat;

background-position:right top;

}

背景- 简写属性

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。

为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.

背景颜色的简写属性为 "background":

实例

body {background:#ffffff url('img_tree.png') no-repeat right top;}

尝试一下 »

当使用简写属性时，属性值的顺序为：:

background-color
background-image
background-repeat
background-attachment
background-position

以上属性无需全部使用，你可以按照页面的实际需要使用.

这个实例使用了先前介绍的CSS，你可以查看相应实例: CSS 实例

更多实例

如何设置固定的背景图像

本例演示如何设置固定的背景图像。图像不会随着页面的其他部分滚动。

CSS 背景属性

Property	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

篇文章结合上一篇所讲到的CSS3技术中有关背景的属性，制作一个实例。小海前端（头条号）带领大家一同实现一个漂亮的信纸背景效果。

承接文章：更加强大的背景图像，CSS3增强的背景效果，前端对背景的优化

技术等级：中级 | 适合有一定的CSS基础的人士阅读。

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

一、信纸背景实例效果：

本篇文章所实现的信纸背景效果如下图所示。

信纸背景实例的最终效果图

首先要明确一点：上图中看到的除了文字以外的背景部分，并不是一张完整的背景图片，而是由多个具有透明背景的png图片利用CSS3的多重背景拼接出来的。

本实例所使用到的素材图片如下图所示。

用到的素材图片

从上图中可以看出，我们一共使用了六张素材图片。前五张图片都是png格式，背景为透明。最后一张图片是一个纹理jpg图片，可以随意设置透明效果的纹理。

left-bottom.png，实现左下角的花边效果。
left-top.png，实现左上角的花边效果。
right-bottom.png，实现右下角的花边效果。
right-top.png实现右上角的花边效果。
line.png，实现信纸的水平线格子效果
wenli.jpg，实现信纸的背景纹理效果。

跟着小海前端（头条号）学的小伙伴们，可以自行在网上搜索图片，利用Photoshop制作成素材的样子，大家可以发挥自己的设计头脑，制作出各种不同的信纸效果。

二、页面布局：

这个实例的页面布局非常简单，制作一个<div></div>标记对作为容器，并将该容器的id属性的取值设置为mail。然后在容器内部放置<h1></h1>标记对作为标题，信件的正文使用<p></p>标记对进行包裹即可。

HTML代码结构如下所示。

<div id="mail">
<h1>古埃及的金字塔</h1>
<p>信件的正文</p>
</div>

三、利用CSS设置#mail的常规属性：

为了便于查看，可以设置#mail的CSS样式。设置该容器的宽度为400像素，高度为600像素。并设置容器在页面内居中显示。将容器的填充宽度设置为50像素，并在容器外部添加一个10像素的深红色边框线。

最后调整内部文字的CSS样式。包括文字的字号设置为14像素，首行缩进为28像素，行高为27像素。当然也可以根据水平线格子的间隔高度自行调整上述参数。

CSS代码如下所示。

#mail{
width:400px; height:600px;
margin:0 auto;
padding:50px;
border:solid 10px rgba(132,26,26,0.8);
font-size: 14px;
line-height: 27px;
text-indent: 28px;
}

四、加载背景图片：

接下来我们要为#mail加载背景图片，这需要将素材图片中准备的所有png图片和wenli.jpg图片全部加载到该容器中作为背景。

CSS3中的background-image已经支持多背景图片的功能，只需要将多个图片的url()路径之间利用逗号隔开即可。一定要注意：必须是逗号进行间隔。

CSS代码如下所示。

background-image: url(../images/line.png),
url(../images/left-top.png),
url(../images/left-bottom.png),
url(../images/right-top.png),
url(../images/right-bottom.png),
url(../images/wenli.jpg);

五、设置多背景图片的背景属性：

下一步需要设置多背景图片的其他背景属性。这需要根据background-image属性加载背景图片的顺序来完成其他背景属性的设置。

这里需要注意，上一步的代码中显示，第一个加载的是水平线格子图片line.png，接下来一次加载的是左上角花边、左下角花边、右上角花边、右下角花边，最后是纹理图片wenli.jpg。

1、设置背景图片的平铺方式：

我们知道：第一个加载的水平线格子图片应该平铺；四个方向角的花边图片不应该平铺；纹理图片应该平铺。

因此根据背景图片的加载顺序可以书写成如下格式：

background-repeat: repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat;

大家仔细观察，所有的平铺取值都是使用逗号隔开的，而且共有6个平铺取值，正好对应background-image属性中加载的六张图片的顺序。

2、设置背景图片的定位：

这里使用background-position属性来设置背景图片的定位。

第一个加载的水平线格子图片因为平铺，所以位置可以从容器的左上角就开始显示。因此取值为left top。
左上角花边应该显示在左上角，即left top。
左下角花边应该显示在左下角，即left bottom。
右上角花边应该显示在右上角，即right top。
右下角花边应该显示在右下角，即right bottom。
最后一个加载的纹理图片因为也平铺，所以也从左上角开始显示。

CSS代码如下所示：

background-position: left top,left top,left bottom,right top,right bottom,left top;

3、设置图片的大小：

这里可以根据背景图片本身的大小进行适当的缩放。

CSS代码如下所示：

background-size: 50px,20%,20%,20%,20%,50px;

属性background-size原本需要指定两个数值来表示宽度和高度的大小变化。若只指定了一个数值，则宽度和高度均采用该数值来对图片进行缩放。

4、设置图片显示的原点坐标：

这里只有水平线格子图片和纹理图片的显示需要调整原点坐标。

水平线格子只出现在由文本内容的部分，因此设置为content-box，从文本区域开始显示。
纹理图片可以设置为padding-box，即从填充区域开始显示。
其他图片都设置为border-box，即从边框开始显示。

CSS代码如下所示。

background-origin: content-box,border-box,border-box,border-box,border-box,padding-box;

5、设置图片的显示区域：

每张图片的显示区域都从所设置的原点坐标就开始显示，因此取值与原点坐标的取值是相同的。

CSS代码如下所示。

background-clip: content-box,border-box,border-box,border-box,border-box,padding-box;

六、整个实例的完整CSS代码：

本篇文章带领大家所制作的信纸背景效果的完整CSS代码如下图所示。

完整的CSS代码

小海声明

在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。

文章预告

下一篇文章中，小海前端（头条号）会为小伙伴们继续介绍CSS3新增的属性值。下一篇文章介绍CSS3的边框属性功能。

在线咨询

上一篇：Java对图片Base64转码-HTML对Base64解码「Java加强版」
下一篇：HTML中表格的实例应用

您的项目需求

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

整合营销服务商

HTML边距和背景图片的设置

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

小海声明

关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。

文章预告

您的项目需求