CSS样式可以精确控制HTML元素的背景、边框的样式和外观，也可以精确控制边框的线型和形状。其中，背景相关属性可以用于控制背景色、背景图片等属性。在控制背景图片的同时还可以控制背景图片的排列方式。

　　常用的背景相关属性如下：

  • background：设置对象的背景样式，是一个复合属性，可以用于同时设置背景色、背景图片、背景重复模式等属性。

　　该复合属性可以分开写为以下几个属性：

  • background-color：设置背景色。如果同时设置了背景色和背景图片，则背景图片将覆盖背景色。
  • background-image：设置背景图片。该属性需要使用url()函数指定图片地址，图片地址既可以是相对地址，也可以是绝对地址。
  • background-repeat：用于设置对象的背景图片是否平铺。在指定该属性之前，必须先指定background-image属性。其属性值有repeat（平铺）、no-repeat（不平铺）、repeat-x（仅在横向平铺）和repeat-y（仅在纵向平铺）。CSS 3 为该属性新增了space和round，这两个属性值用于保证图片不会被裁减。其中，round通过自动调整背景图片的大小来达到目的，而space是调整背景图片的间距。
  • background-attachment：用于设置背景图片是随对象内容滚动还是固定的。该属性支持以下两个值：
    • scroll：指定背景图片会随元素里内容的滚动而滚动。是默认值。
    • fixed：背景图片固定，不会随元素里内容的滚动而滚动。
  • background-position：用于设置对象的背景图片位置。该属性需要横坐标和纵坐标两个值。（当一个网页中的小图标非常多时，通常会使用雪碧图以达到减少加载网页图片时对服务器的请求次数的目的，在使用雪碧图时，就需要使用background-position来定位显示出相应的小图标）

　　

　　除了以上几个属性外，CSS 3 中新增了几个背景相关属性。

　　1、background-clip：用于设置背景图片的覆盖范围

　　　　该属性支持以下几个属性值：

    • border-box:指定背景覆盖盒模型的边框区（border）、内填充区（padding）、内容区（content）
    • no-clip：指定背景覆盖盒模型的边框区（border）、内填充区（padding）、内容区（content）
    • padding-box：指定背景覆盖盒模型的内填充区（padding）、内容区（content）
    • content-box：指定背景覆盖盒模型的内容区（content）

　　盒模型相关概念请查看：https://www.cnblogs.com/web12/p/9925742.html

2、background-origin：用于设置背景覆盖的起点

该属性支持以下几个属性值：

    • border-box:指定背景图片从边框区开始覆盖
    • padding-box：指定背景图片从内容填充区开始覆盖
    • content-box：指定背景图片从内容区开始覆盖

3、background-size：用于设置背景图片的大小

　　　　该属性由两个值组成，分别代表图片的宽度、高度。可以设置具体的长度值，也可以指定百分比（为它所在元素的宽或高的百分比），还可以设置为auto（指定背景图片保持纵横比缩放，宽度、高度只能有一个被指定为auto，表明宽度、高度会以保持纵横比的方式自动计算出来）。

　　CSS3允许为以上几个属性指定多个属性值（属性值之间以英文逗号隔开）以此来实现多背景图片的效果。

　　CSS3还为背景提供了线性渐变和径向渐变支持，使得开发者可以进行更多灵活的背景设置。

  • 使用linear-gradient设置线性渐变

　　语法格式为：background-gradient：linear-gradient（渐变方向，颜色列表）

　　方向参数支持如下：

角度 用英文 作用
0deg to top 从上到下
90deg to right 从左到右
180deg to bottom 从上到下
270deg to left 从右到左
  to top left 右下角到左上角
  to top right 左下角到右上角

　　CSS3还提供了repeating-linear-gradient设置循环线性渐变，这种渐变将会循环利用给出的渐变颜色。下面页面代码示范了循环线性渐变的功能。

<head>
　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title> 循环线性渐变 </title>

    <style type="text/css">

    /* 为div元素增加边框 */

    div{

        height: 400px;

        width: 400px;

    }

    </style>

</head>

<body>

background:repeating-linear-gradient(red, blue 10%, magenta 20%)<br>

红、蓝、洋红循环线性渐变

<div id="dv1" style="background:repeating-linear-gradient(red, blue 10%, magenta 20%);"></div>
<!-- 为input滑动事件（range）绑定onchange事件处理器 -->

角度：<input style="width:360px" type="range" min="0" max="360" value="0"

    onchange="change(this.value);">

<script type="text/javascript">

function change(val){

    var s = "linear-gradient(" + val + ", red, blue)";

    document.getElementById("dv1").style.background =

        "repeating-linear-gradient(" + val + "deg, red, blue 10%, magenta 20%)";

}

</script>

</body>

其效果如下：

　　

  • 使用radial-gradient设置线性渐变

　　其语法格式如下：

　　　　background：radial-gradient（形状？大小？at x坐标 y坐标，颜色列表）

　　radial-gradient语法格式可分为4个部分

  • 形状：指定径向渐变的形状，目前支持circle和ellipse两种形状。该属性值可以被省略，如果省略，将由浏览器感觉被添加背景的HTML元素的形状来决定渐变的形状。
  • 大小：指定径向渐变的大小。这部分也可以省略，如果省略，也将由浏览器来决定，通常会占满整个HTML元素。
  • 圆心：圆心部分必须由at关键字开头，后面紧跟圆心的x坐标和y坐标。这部分也可以省略，如果省略，则默认为HTML元素的中心。x坐标和y坐标支持如下写法：
    • left：代表x坐标的最左边
    • center：可代表x左边和y坐标的中间
    • right：代表x坐标的最右边
    • top：代表y坐标的最顶部
    • bottom：代表y坐标的最底部
    • 数值：支持长度值和百分比，可代表x左边和y坐标的值
  • 颜色列表：可以指定多个颜色

CSS背景相关属性的更多相关文章

  1. CSS 基础 背景相关属性操作

    1.background-color:red : //设置背景颜色为红色,rgb(0,0,0)和transparent 均为透明颜色 2.background-image(可缩bgi写用tab键) 语 ...

  2. CSS will-change 属性

    介绍 如果你注意到在webkit的浏览器上“flicker”一些CSS操作(尤其是变形和动画方面的)的表现,你很可能之前就注意过硬件加速了 CPU.GPU和硬件加速 硬件加速意味着Graphics P ...

  3. css动画属性性能

    性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...

  4. CSS字体属性大全

    文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) ...

  5. css z-index属性使用过程中遇到的问题

    z-index属性在web开发中会经常使用,其主要的作用简单的说就是把元素的position设置为absolute.fixed之后,可以调节元素在文档上的层级关系.比如经常见到的dialog,mask ...

  6. 【转】CSS z-index 属性的使用方法和层级树的概念

    文章转自:CSS z-index 属性的使用方法和层级树的概念,另外加了一点自己的注释 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面 ...

  7. css之属性部分

    这篇写的是今天的学习到的属性,一共20个. 属性再多,但也要会使用,会在使用时可以记起它,才能起到它为我们所需要的作用. 样式属性 1.border CSS边框属性允许你指定一个元素边框的样式和颜色. ...

  8. CSS背景属性Background详解

    [转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...

  9. CSS3 border-radius 属性和CSS outline 属性

    CSS3 border-radius 属性 border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性. 提示:该属性允许为元素添加圆角边框! 注释:按此顺序设 ...

随机推荐

  1. Bootrap 项目实战（微金所前端首页）第一部分

    微金所前端首页成果图:(这是本人自己按照微金所官网首页,采用Bootrap,JS,JQuery,css制作的网页效果图,在第二部分我会公布网页源代码) 如需网页源代码,请在下方留言,备注你的qq邮箱. ...

  2. centos的基本命令01

    01:创建用户命令 useradd liulaoshi # 创建用户 passwd liulaoshi # 设置密码, 回车后会提示让你输入两次密码 1.用户列表文件:/etc/passwd/ 2.用 ...

  3. python 全栈开发：python基础

    python具有优美.清晰.简单,是一个优秀并广泛使用的语言.诞生于1991年2.python历史 1989年,为了打发圣诞节假期,Guido开始写Python语言的编译器.Python这个名字,来自 ...

  4. python全栈开发_day10_函数的实参和形参

    一:函数的实参和形参 实参是在调用函数时()出现的外界的实际的值 形参不能再函数外部直接使用 1)实参的两种形式 实参是调用函数时()中传入的参数 1.位置实参 def a(a): print(a) ...

  5. [CQOI2015]标识设计

    Luogu3170 128MB过不去 LOJ2099 256MB能卡过 BZOJ3934 512MB怎么都过的去 求在\(30*30\)的方格上放\(3\)个\(L\)的方案 , 有障碍 拓展这条路的 ...

  6. sklearn的train_test_split

    train_test_split函数用于将矩阵随机划分为训练子集和测试子集,并返回划分好的训练集测试集样本和训练集测试集标签. 格式: X_train,X_test, y_train, y_test ...

  7. js 面向对象 定时器 046

    获取DOM对象补充 document.getElementsByTagName('div'); //获取的多个DOM对象 这种对象叫伪数组 如果想遍历此对象 通过for(var i=0; i < ...

  8. SQL基础语法select|insert|update|delete(增删改查) 简单使用

    以下案列以此表举例 1.select(查询) select简单的查询分为两种 注:字段也就是表结构中的列的名称 第一种: select  字段名  from  表名 此种查询只列出你所需要查询的字段, ...

  9. 微信小程序踩坑

    微信小程序自定义属性data-xx使用注意事项 data-xx采用驼峰式命名时,数据传递打印显示(以jxsName与jxsname打印显示对比) data-xx全小写命名时,数据传递打印显示

  10. python any和all

    摘自<流畅的Python> all 和 any 也是内置的归约函数. all(iterable) 如果 iterable 的每个元素都是真值,返回 True:all([]) 返回 True ...