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. 斐讯K2P配置文件破解笔记

    手上有一个斐讯K2P路由器,刷机前我想把原机带的固件备份出来.搜到恩山A大开启telnet.固件备份的教程,里面提到了配置文件破解的方法,心血来潮试了一下,发现算出的密码不能解密,一直报"b ...

  2. 子元素margin-top为何会影响父元素？

    子元素margin-top为何会影响父元素? 引用地址:https://blog.csdn.net/sinat_27088253/article/details/52954688 2016年10月28 ...

  3. ORM中的一对一和多对多

    ORM中的一对一和多对多 Django ORM  ORM 一对一 什么时候用一对一? 当 一张表的某一些字段查询的比较频繁,另外一些字段查询的不是特别频繁 把不怎么常用的字段 单独拿出来做成一张表 然 ...

  4. Angular material mat-icon 资源参考_File

    ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...

  5. CF1063F. String Journey（后缀数组＋线段树）

    题目链接 https://codeforces.com/contest/1063/problem/F 题解 虽然本题有时间复杂度较高但非常好写的做法...... 首先,若答案为 \(k\),则一定存在 ...

  6. dedicated bearer

    Session Initiation Protocol (SIP) Basic Call Flow ExamplesRFC3665 intuitive,   done. PDF] TS 123 401 ...

  7. my.等级限制

    1.20190405 “春之恋曲 4月5日双平台新服开服公告”,20190426  上去新建了一个号  发现等级限制是 66级(2天后开启新等级) 20190412 “胭脂雪 4月12日双平台新服开服 ...

  8. Java 抽象类的简单使用

    自己做的一点笔记... 抽象类:使用关键词 abstract 进行修饰,抽象类不能生成对象(实例化),且含有抽象方法(使用 abstract 进行声明,并且没有方法体). 特点: 1️⃣  抽象类不一 ...

  9. 线程局部存储空间 pthread_key_t、__thread 即 ThreadLocal

    https://www.jianshu.com/p/495ea7ce649b?utm_source=oschina-app 该博客还未学习完  还有   pthread_key_t    Thread ...

  10. KafKa 启动

    Zookeeper 运行kafka需要使用Zookeeper,所以要先启动Zookeeper,如果没有Zookeeper,可以使用kafka自带打包和配置好的Zookeeper 1.进入kafka的b ...