Css3之基础-5 Css 背景、渐变属性

一、CSS 背景概述

背景属性的作用

  - 背景样式可以控制 HTML 元素的背景颜色、背景图像等 

  - 背景色

      - 设置单一的颜色作为背景

  - 背景图像

      - 以图片作为背景

      - 可以设置图像的位置、平铺、尺寸等

二、CSS 背景属性

背景色 background-color 

  - 属性用于为元素设置背景色

      - 接受任何合法的颜色值

      - 可取值为 transparent

  - 为元素背景设置一种纯色

      - 会填充元素的内容、内边距和边框区域

      - 如果边框右透明的部分，会透过这些透明部分显示出背景色

背景图片 background-p_w_picpath 

  - 默认值是 none,表示背景上没有放置任何图像

  - 如果需要设置一个背景图像，需要用起始字母 url 附带一个图像的 URL 值

      - 可以是相对 URL 或者绝对 URL

背景重复 background-repeat

  - 默认情况下，背景图像在水平和垂直方向上重复出现(平铺)，创建一种称为"墙纸"的效果

  - 可以使用 background-repeat 属性控制背景图像的平铺效果

  - background-repeat 可取值为

      - repeat   :在垂直方向和水平方向重复，为默认值

      - repeat-x :仅在水平方向重复

      - repeat-y :仅在垂直方向重复

      - no-repeat:仅显示一次

背景图片尺寸 background-size

  - 规定背景图像的尺寸，可取值为

      - value1,value2 : 宽度,高度

      - value1% value2% : 百分比

      - cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，图片的某些部分也许无法显示

      - contain: 把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

背景图片的固定 background-p_w_upload

  - 默认情况下，背景图像会随着页面的滚动而移动

  - 可以通过 background-p_w_upload 属性来设置

      - 默认值是 scroll: 默认情况下，背景会随文档滚动

      - 可取值为 fixed : 背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图像

背景图片的固定 background-position

  - background-position 属性改变图像在背景中的位置

  - 该属性的取值为

背景图片的固定 background-clip

  - background-clip 属性规定背景的绘制区域

  - 可取值为     

      - border-box:  背景被裁剪到边框盒，为默认值

      - padding-box: 背景被裁剪到内边距框

      - content-box: 背景被裁剪到内容框

背景的定位区域 background-origin

  - background-origin 属性规定背景图片的定位区域

  - 可取值为   

      - border-box :背景图像相对于边框来定位

      - padding-box:背景图像相对于内边距框来定位

      - content-box:背景图像相对于内容框来定位

背景属性 background

  - background 属性在一个声明中设置所有的背景属性

  - 语法结构是:

      - background: color url(图像URL) repeat p_w_upload position;

  - 如果不设置其中的某个值，将使用默认值

三、CSS 渐变属性

渐变概念

  - 渐变指，两种或者多种颜色之间的平滑过渡

  - 可以指定多个中间颜色值(色标)

      - 每个色标包含一种颜色和一个位置

      - 每个色标的颜色淡出到下一个，以创建平滑的渐变

  - 渐变可以用在任何使用背景图片的地方

      - 线性渐变

      - 径向渐变

      - 重复渐变

渐变语法

  - 使用background-p_w_picpath属性进行设置

  - 可以取值

      - linear-gradient : 线性渐变

      - radial-gradient : 径向渐变

      - repeating-linear-gradient : 重复线性渐变

      - repeating-radial-gradient : 重复径向渐变

线性渐变

  - linear-gradient(angle,color-point1,color-point2,...)

      - angle: 为第一个参数，指定渐变的方向，可以是角度值，也可以是关键词，如 to top(对应0deg),to right(对应 90deg),to bottom(对应180deg),to left(对应270deg)

      - color-point: 表示颜色的起始点、中间点或者结束点，取值为颜色和位置的组合，如 red 0%、green 50%

径向渐变

  - redial-gradient([size at position],color-point1,color-point2,...)

      - position:为第一个参数，指定渐变的圆心位置，默认值为center;可以取值为数值、百分比，或者关键字;此参数可以省略

      - color-point: 表示颜色的起始点、中间点或者结束点，取值为颜色和位置的组合，如 red 0%、green 50%

重复渐变

  - 重复线性渐变

      - repeating-linear-gradient(angle,color-point1,color-point2,...)

  - 重复径向渐变

      - repeating-radial-gradient([size at position],color-point1,color-point2,...)

浏览器兼容性

  - 目前，各浏览器的新版本均支持渐变属性

  - 对于不支持的版本

      - Firefox 需要前缀 -moz-

      - Chrome 和 Safari 需要前缀 -webkit-

      - Opera 需要前缀 -o-

总结：本章内容主要介绍了 Css 背景、渐变属性。

转载于:https://blog.51cto.com/jasonteach/1753846