整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
CSS中，背景样式主要包括背景颜色和背景图像。在传统的布局中，只能使用少数的标签来定义背景图像和背景颜色。但是随着Web2.0时代的到来，设置背景样式不再使用传统HTML属性来定义，转而使用无限制、更灵活的CSS来定义。
目标
在CSS中，使用background-color属性来定义元素的背景颜色。
语法：background-color:颜色值;
说明：颜色值是一个关键字或一个16进制的RGB值。
HTML标签
背景颜色设置
效果
在CSS中，使用background-image属性来定义元素的背景图片。
语法：background-image:url("图像地址");
说明：图像地址可以是相对地址，也可以是绝对地址。
注意：给某个元素设置背景图像，元素要有一定的宽度和高度，背景图片才会显示出来。如果设置的元素的宽高过小，背景图片就无法完整地显示出来了。
设置背景图片
效果
在CSS中，使用background-repeat属性可以设置背景图像是否平铺，并且可以设置如何平铺。
语法：background-repeat:取值;
取值
当值是repeat，全屏覆盖
全屏覆盖
当值是repeat-x，x轴方向覆盖
x轴方向覆盖
当值是repeat-y，y轴方向覆盖
y轴方向覆盖
当值是no-repeat，不复制
不复制
在CSS中，使用background-position设置背景图像的位置
语法：background-positon:像素值/关键字;
说明：语法中的取值包括两种，一种是采用像素值，另一种是关键字描述。
1. 像素值
要设置水平方向数值（x轴）和垂直方向数值（y轴），参数如下
取值
假设设置一个距离左上角水平方向100px，垂直方向100px
背景图片位置设置
效果如下
效果
2. 关键字
当background-position取值为关键字时，也需要设置水平方向和垂直方向的值，只不过值不是使用px为单位的数值，而是使用关键字代替。
取值
假设我们要设置一个水平方向、垂直方向都居中的位置，就可以这样设置
背景图片位置设置
这样他就永远都处于屏幕的正中间
效果
在CSS中，使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动
语法：background-attachment:scroll/fixed;
说明：background-attachment 属性只有2个属性值。scroll表示背景图像随对象滚动而滚动，是默认选项；fixed表示背景图像固定在页面不动，只有其他的内容随滚动条滚动。
背景固定设置
效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
/*总体的样式*/
<style>
/*盒子样式*/
#box{
width: 350px; //宽
height: 450px; //高
border: 1px solid black; //边框
border-radius: 10px; //边框弧度
font-family: 黑体; //字体
letter-spacing:8px; //段间距
word-spacing: 10px; //字间距
line-height: 40px; //行高
font-size: 18px; //字大小
padding: 20px; //内边框
}
/*给'注册'赋予样式*/
.register{
width:280px ; //宽
height: 50px; //高
background-color: skyblue; //背景颜色
border-radius: 10px; //边框弧度
}
/*将所有边框都改变*/
*{
border-radius: 5px; 边框弧度
}
/*使用class选择器，赋予number宽高和边框*/
.number{
width: 185px; //宽
height: 27px; //高
border-width: 1px; //边框宽度
}
/*id选择器*/
#two{
width: 55px; //宽
border-width: 1px; 边框宽度
}
/*id选择器*/
#phone{
width: 103px; //宽
}
/*class 选择器*/
.boxs{
zoom: 75%; //清除浮动
color: darkgray; //颜色
}
/*class选择器*/
.box_a{
width: 50px; //宽
height: 50px; //高
background-image: url("../image/04.jpg "); //背景图片
background-repeat: no-repeat; // 是否平铺
background-size: 50px 25px; //背景尺寸
position: relative; //定位 相对定位
left: 310px; //定位后左移
bottom: 32px; //定位后下移
}
</style>
</head>
<body>
<div id="box">
<h1>请注册</h1>
<p style="color: darkgray">已有帐号?<a href="https://im.qq.com/index">登录</a></p>
<form action="" method="post">
<label for="name">用户名</label>
<input type="text" placeholder="请输入用户名" id="name" class="number"> <br>
<label for="phone">手机号</label>
<select name="" id="two" class="number">
<optgroup>
<option style="" class="">+86</option>
</optgroup>
</select>
<input type="text" placeholder="请输入手机号" id="phone" class="number"> <br>
<label for="mima">密 码</label>
<input type="password" placeholder="请输入密码" id="mima" class="number"> <br>
<label for="mima">验证码</label>
<input type="password" placeholder="请输入验证码" id="is" class="number">
<div class="box_a"></div>
<div class="boxs">
<input type="radio" id="" class="accept">阅读并接受协议<br>
</div>
<input type="submit" value="注册" class="register" >
</form>
</div>
</body>
</html>
在这里插入图片描述望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。
【技术等级】初级
【承接文章】《图片在容器中产生的底部间隔，CSS可以巧妙解决，前端原理很重要》
本文重点讲解利用CSS技术设置HTML元素的背景，包括背景颜色和背景图片，这样可以让你的页面更加美观。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。
背景属性是指可以为HTML中的页面、块级元素、内联元素等设置背景外观的效果。这里一定要注意，背景属性并不是只能为页面背景设置的，也可以为HTML文档中任意元素设置背景的。这一组CSS属性包括以下几个：
background-color
background-image
background-repeat
background-position
background-attachment
一、设置背景颜色：
CSS利用 background-color 属性设置元素的背景颜色
该属性有多种取值：
十六进制颜色代码，例如：background-color:#ff0000。
十进制颜色代码，例如：background-color:rgb(255,0,0)。
带有透明度通道的十进制颜色代码，例如：background-color:rgba(255,0,0,0.3)。
颜色英文单词，例如：background-color:red。
颜色三要素模式代码，例如：background-color:hsl(0,100,100)。
带有透明度通道的颜色三要素模式代码，background-color:hsla(0,100,100,0.3)。
上述取值较为常用的是“十六进制颜色代码”、“带有透明度通道的十进制颜色代码”和“颜色英文单词”。下面列举几个代码实例。
p{background-color:#ff0000;} //设置段落的背景为红色
body{background-color:#cccccc;} //设置整个文档的背景为灰色
二、设置背景图片：
CSS利用 background-image 属性设置元素的背景图片
该属性的取值格式如下所示：
background-image:url(Image_URL);
该属性需要在 url() 中指定一个图片的路径和文件名，代码示例如下所示。
body{background-image:url(images/back.jpg);
上述代码设置整个页面的背景图片为images文件夹下的名为back.jpg的图片文件
三、设置背景图片的重复平铺方式：
CSS利用 background-repeat 属性设置背景图片的平铺方式
该属性有多种取值：
repeat，默认值，背景图片平铺。
no-repeat，背景图片不平铺。
repeat-x，背景图片水平平铺。
repeat-y，背景图片垂直平铺。
注意：该属性必须结合 background-image 属性共同使用。
四、设置背景图片出现的位置：
CSS利用 background-position 属性设置背景图片出现的位置
1、可以取值为特定的单词组合。
该种取值可以选取以下几种对齐方式：
水平方向：left（左对齐）、right（右对齐）。
垂直方向：top（顶对齐）、bottom（底对齐）。
居中对齐：center。
上述对齐方式拼凑起来，可以下列形成9种取值方式：
top left, 背景图片顶部居左，位于页面的左上角。
top center, 背景图片顶部居中，位于页面的上方。
top right, 背景图片顶部居右，位于页面的右上角。
center left, 背景图片中部居左，位于页面的中部左侧。
center center, 背景图片中部居中，位于页面的正中心。
center right, 背景图片中部居右，位于页面的中部右侧。
bottom left, 背景图片底部居左，位于页面的右下角。
bottom center, 背景图片底部居中，位于页面的下方。
bottom right, 背景图片底部居右，位于页面的右下角。
注意：若只选取一个对齐方式，则第二个默认为center。
2、可以取值为带有单位的固定坐标值：
格式：background-position:x y;
例如：background-position:100px 300px;
3、以百分比为单位的坐标值：
格式：background-position:x% y%;
例如：background-position:20% 15%;
注意：该属性的使用必须同时具备下列两个条件。
具备background-image属性，也就是必须带有背景图片。
background-repeat属性不能取值为repeat，也就是背景图片不平铺。
五、设置背景图片是否固定或随着页面的其余部分滚动：
该属性有多种取值：
scroll，默认值，背景图片随页面的其余部分滚动。
fixed，背景图片固定。
下一篇文章中，小海老师会以本篇文章讲述的几个属性来带领大家实践一些实例。对于渴望在前端开发道路上前进的你一定不能错过！
如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。
在头条上也已经写了有七八篇文章了。这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。
*请认真填写需求信息，我们会在24小时内与您取得联系。
