CSS3的魔法——常见属性

之前几篇简单讲解了一下CSS编写规则,和一些示例。相信你已经对CSS有一定的了解。
那么接下来我们讲解一下CSS中常见的属性,以及它们的特性。

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

属性名功能
background-color 用来定义元素的背景颜色
background-image 用来定义元素的背景图片
background-repeat 设置背景图像是否如何重复
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-position 设置背景图片在元素中的位置
background-size设置背景图片在元素内的大小比率

1、background-color定义背景颜色示例:

body{
background-color:#34d6a5
}
/*这样就给HTML整个body元素加上了一个原谅色*/

css中颜色值一般用以下几种方式来定义

  1. 十六进制 如:“#3f96a0”
  2. RGB 如 “rgb(255,255,255)”
  3. RGBA 如“rgba(255,255,255,0.5)”
  4. 颜色名 如“red”

注意:RGB和RGBA的区别就是RGBA 引入了第四个值,用于表示颜色的透明度,用rgb设置的颜色是不透明的,而用rgba设置的颜色,0代表的是完全透明,1代表的是不透明
另外RGBA是CSS3的新属性旧的浏览器可能不支持

2、background-image定义背景图片 示例:

body{
 background-image:url('https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png')
}
/*这就在body元素中引入了百度的logo图片*/
body{
 background-image:url('./logo_top.png')
}
/*这就引入了名为logo_top.png的图片*/

注意: 默认情况下,背景图像进行平铺重复显示,图片会覆盖整个元素

3、background-repeat 水平或垂直平铺 示例:

background-repeat有可能有三种值:
no-repeat ——不平铺
repeat-x ——水平平铺
repeat-y ——垂直平铺

body{
  background-image:url('./logo_top.png');
  background-repeat:no-repeat;
}
/*设置不进行平铺*/
body{
  background-image:url('./logo_top.png');
  background-repeat:repeat-x;
}
/*设置水平平铺*/
body{
  background-image:url('./logo_top.png');
  background-repeat:repeat-y;
}
/*设置垂直平铺*/

注意:background-repeat单独使用看不出效果,必须要搭配background-image一同使用才能看到效果

4、background-attachment设置背景图像是否固定或者随着页面的其余部分滚动 示例:

background-attachment有三个值:
scroll —— 背景图片随页面的其余部分滚动。默认
fixed —— 背景图像是固定的
inherit —— 指定background-attachment的设置应该从父元素继承

body{ 
    background-image:url('logo_top.png');
    background-repeat:no-repeat;
    background-attachment:fixed;
}
/*设置背景图片默认固定在HTML上的左上角,不随页面滚动而滚动*/

5、 background-position 设置背景图像的起始位置 示例:

background-position的值有两个,第一个代表背景图的水平位置,第二个值是垂直位置
它的值有三种:
1、可以选择left / right / top / bottom 中的两个
2、可以使用%来指定背景图片在元素中的位置
3、使用px来指定背景元素中的位置
4、 inherit 表示 指定background-position属性设置应该从父元素继承

body{
background-image:url('logo_top.png');
background-repeat:no-repeat;
background-position:center top;
}

6、 background-size 设置背景图片在元素内的大小比率

background-size 的值有两个,第一个值设置宽度,第二个值设置的高度。

注意:若只设置第一个值,那么第二个值默认为auto

body{
    background:url('logo_top.png');
    background-size:80px 60px;
    background-repeat:no-repeat;
}