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. UVA-10929-You can say 11（秦九昭算法+同余与模算术）

    原题链接 1000位大数取余: 秦九昭算法+同余与模算术: 1314 = (((1)*10+3)*10+1)*10+4 ( a + b ) % n = ( ( a % n ) + ( b % n ) ...

  2. 《[MySQL技术内幕：SQL编程》读书笔记

    <[MySQL技术内幕:SQL编程>读书笔记 2019年3月31日23:12:11 严禁转载!!! <MySQL技术内幕:SQL编程>这本书是我比较喜欢的一位国内作者姜承尧, ...

  3. 搭建USB摄像头转RTSP服务器的多种方法

    USB摄像头与网络摄像头相比,可选择范围广.种类多.成本低,但是实际使用时需要通过rtsp流来访问,起到直播的效果,因此在摄像头采集终端上构建rtsp流媒体服务器,将USB摄像头数据转化为rtsp,可 ...

  4. centos的用户的基本操作

    :一:查看当前系统中的用户账号 grep bash /etc/passwd 二:利用root用户(超级管理员给普通用户修改密码)--------  root用户可以修改其他所有人的密码,且不需要验证 ...

  5. 九校联考（DL24凉心模拟） 整除（中国剩余定理＋原根性质）

    题意简述 给定 \(n, m\),求 \(n|x^m - x\) 在满足 \(x \in [1, n]\) 时合法的 \(x\) 的数量.答案模 \(998244353\).单个测试点包含多组数据. ...

  6. Linux Mint下FireFox安装Adobe Flash Player

    最近在为自己的家里一台很老的机子(由于微软不再支持windows,windows10什么的不是这个老机子可以带的起来的233)选择一个合适的linux系统安装.看来看去,最终选择了排行很靠前,感觉也不 ...

  7. 通过shell处理多行数据

    ### 源文件 cat > tmpb <<'EOF' dbname:db_a,start_time::: query_end_time:::,query_total_time:,da ...

  8. Which mb sdconnect c4 worth the money?

    MB SD connect C4 with laptop v2018.5 Version avaiable now ,It is ready to work after you get it ,wor ...

  9. Java中的AES加解密工具类：AESUtils

    本人手写已测试,大家可以参考使用 package com.mirana.frame.utils.encrypt; import com.mirana.frame.constants.SysConsta ...

  10. 服务端模拟http服务请求客户端

    try { InputStream in = req.getInputStream(); int i = -1; ByteArrayOutputStream out = new ByteArrayOu ...