网站开发实训目的,网站备案更换,深圳医学科学院,怎么做系统软件网站一、CSS 背景概述背景属性的作用- 背景样式可以控制 HTML 元素的背景颜色、背景图像等 - 背景色- 设置单一的颜色作为背景- 背景图像- 以图片作为背景- 可以设置图像的位置、平铺、尺寸等二、CSS 背景属性背景色 background-color - 属性用于为元素设置背景色- 接受任何合法的颜… 一、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
