css中的背景样式background的使用
- background-color 背景颜色
- background-image 背景图片
- background-repeat 规定如何重复背景图片
- background-position 规定背景图片的位置
- background-attachment 背景关联属性
- background-size
- background: 综合样式的控制属性
注意:
在使用背景属性的时候,一定要给背景宽高
提示
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041
background-color 背景颜色
background-color顾名思义,就是背景样式的颜色设置:
使用非常简单,主要区分的就是其后面的数值可以有很多种
使用:
background-color:#333344; //使用16进制
background-color:red; //使用英文名字设置
background-color:rgb(aa,bb,cc); //使用rgb进行16进制颜色转换
background-color:rgba(11,22,33,0.5) //增加了颜色的透明度
注意颜色透明度的数值是从0---1之间
background-color:#ccc rgb(22,22,22) rgba(22,44,66,0.4);
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body, dl, dd, dt, p, h1, h2, h3, h4, h5, h6 {
margin: 0;
}
ul, ol {
margin: 0;
list-style: none;
padding: 0;
}
a {
text-decoration: none;
}
* {
margin: 0;
padding: 0;
}
.main{
width: 1200px;
background-color: #84a3e3;
border: 1px solid red;
margin: 30px auto;
}
.main div{
width: 100px;
height: 100px;
}
.main .hex{
background-color: #330033;
}
.main .english_color{
background-color: red;
}
.main .rgb{
background-color: rgb(55,66,77);
}
.main .rgba{
background-color: rgba(11,22,33,0.5);
}
</style>
</head>
<body>
<div class="main">
<div class="hex">
使用16进制颜色
</div>
<div class="english_color">
使用英文名字
</div>
<div class="rgb">
使用rgb进行颜色设置
</div>
<div class="rgba">
使用rgba进行颜色设置
</div>
</div>
</body>
</html>
如下所示:
background-image 背景图片的加载
背景图片的加载,使用的是url进行加载,注意url是小写,并且内部是有引号的
background-image:url("图片的路径");
background-image:none;//表示不去加载背景图片
注意:加载的路径可以使本地绝对路径,相对路径,以及网络路径等,具体看项目需求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body, dl, dd, dt, p, h1, h2, h3, h4, h5, h6 {
margin: 0;
}
ul, ol {
margin: 0;
list-style: none;
padding: 0;
}
a {
text-decoration: none;
}
* {
margin: 0;
padding: 0;
}
.main{
width: 1200px;
background-color: rgba(33,44,55,0.5);
margin: 20px auto;
}
.main .content{
width: 450px; ;
height: 684px;
background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505668587341&di=bd80b10b1e9b3815599c80fc05799cd4&imgtype=0&src=http%3A%2F%2Fupload.newhua.com%2F2012%2F0601%2F1338536906276.jpg");
}
</style>
</head>
<body>
<div class="main">
<div class="content">
</div>
</div>
</body>
</html>
background-repeat 规定如何重复背景图片
background-repeat:主要是规定了显示图片是否重复的属性,
在前面一个案例中,主要是我设置的宽高刚刚好是图片本身的宽高,如果盒子的尺寸设置为大于图片的尺寸,这个时候就是默认会平铺
如只是将类content的宽高属性修改完,
.main .content{
width: 800px; ;
height: 800px;
background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505668587341&di=bd80b10b1e9b3815599c80fc05799cd4&imgtype=0&src=http%3A%2F%2Fupload.newhua.com%2F2012%2F0601%2F1338536906276.jpg");
}
显示的效果如下:
可以看到当图片不足以铺满完整的盒子的时候,会默认的沿着x和y轴的方向去平铺,注意:这个平铺的属性值是默认的
下面就看下background-repeat的属性值
background-repeat:no-repeat;//取消平铺属性
background-repeat:repeat;//沿着x轴和y轴的方向去平铺
background-repeat:repeat-x;//沿着x轴的方向平铺,
background-repeat:repeat-y;//沿着y轴的方向上去平铺
注意:no-repeat属性值一般不是单独去使用的,因为当外部盒子过大的时候,图片不能铺满的话,这个时候就会凸显出内部图像与外部盒子的边框之间的界限,UI显示上面会显得low的一笔
background-position 规定背景图片的位置
重点提示:background-position在图标选择中的作用及其重要,或者重要的一笔。
background-position:也叫图片定位,可以定位图标的位置
background-positiond属性值:
1:使用关键字:top,bottom,left,right,和center两两组合来实现
如果只是出现一个关键字,则默认另外一个为center
2:使用百分比来,参考的原长为父级的宽高的长度
background-position:20% 30%;父级宽度的百分之20,父级高度的30%
3:使用具体的数值来进行定位:
background-position:20px 30px;//第一个为x轴方向,第二个为y轴方向
注意:使用具体定位的时候,其参考的初始点为原点,即最左侧定角的坐标为0,0;(注意定位的正负方向性,这个可以使用浏览器调节)
实例图片:
实例代码如下所示:
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8" />
<title>实例代码</title>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<link rel="stylesheet" href="" />
<link rel="shortcut icon" type="image/x-icon" href="" />
<!-- <base target="_blank" /> -->
<style type="text/css">
body,dl,dt,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
ul,ol{margin:0;list-style:none;padding:0;}
a{text-decoration:none;color:inherit;}
*{margin:0;padding:0;}
body{
background:gray;
}
.main{
width:40px;
margin:10px auto;
}
.main ul li a{
display:block;
height:40px;
background:url("../images/1.png")no-repeat;
margin-bottom:5px;
}
.main ul li #icon_1{
background-position:-80px 280px;
}
.main ul li #icon_2{
background-position:0px -200px;
}
.main ul li #icon_3{
background-position:0px -240px;
}
.main ul li #icon_4{
background-position:0px -320px;
}
.main ul li #icon_5{
background-position:0px 0px;
}
</style>
</head>
<body>
<div class="main">
<ul>
<li><a href="#" id = "icon_1"></a></li>
<li><a href="#" id = "icon_2"></a></li>
<li><a href="#" id = "icon_3"></a></li>
<li><a href="#" id = "icon_4"></a></li>
<li><a href="#" id = "icon_5"></a></li>
</ul>
</div>
<hr>
素材
</br>
<div><img src="../左侧菜单.png" alt="" /></div>
</body>
</html>
显示如下:
background-attachment 背景关联属性
background-attachment主要的含义就是背景与页面进行关联
主要的属性值有以下两个
scroll 默认值,背景图片会随着页面的滚动而进行滚动
fixed 当其余页面进行滚动的时候,背景图片是不会进行滚动的
其实脱离了文档流,但是等于是在父级的上的位置,父级在滚动的时候,
scroll会跟着父级的滚动也会一起滚动,而fixed属性值则不会跟着父级滚动而滚动
这里不进行演示,有时候确实也会在牛皮藓广告中偶尔会用到
background-size图片的尺寸信息
我们背景图片的尺寸,第一个字是x轴方向的,第二个字呢是我们的Y轴方向
background-size:主要可以有四个属性的值
1:background-size:100px 200px; //具体的数值,第一个是宽,第二个是高
2:background-size:10% 20%; //按照父级的百分比来计算
3:background-size:cover; //图片按照等比例放大,直到覆盖整个盒子为止
4:background-size:contain; //图片也是等比例放大,直到遇到一条边为止
以上属性值比较常用的大概是contain或者cover;至于宽高一般直接给了父级。
background: 综合样式的控制属性
background与margin或者padidng一样,也是有着复合属性的,复合属性的,其复合属性的属性,大概可以也就是将上述的属性综合起来,然后写在一起罢了
background:background-color background-image background-repeat background-position/backrgound-size;
如下使用方式:
background:red url("../images/1.jpg")no-repeat 20px 30px/cover;
background: deeppink url("images/1.jpg")no-repeat center/cover;
background: deeppink url("images/1.jpg")no-repeat 0 0/cover;
具体实例就不演示了,其使用很简单,主要就是要简单的背一下。