1.background-origin：设置元素背景图片的原始起始位置。

　　　background-origin ： border-box | padding-box | content-box;    参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。（注意：如果背景不是no-repeat，这个属性无效，它会从边框开始显示。）

2.background-clip:用来将背景图片做适当的裁剪以适应实际需要。

　　background-clip ： border-box | padding-box | content-box | no-clip;   参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>背景</title>

    <style type="text/css">

        div{

            border: 15px dashed green;

            background-color: black;

            padding: 30px;

            color: white;

            font-size: 30px;

            font-weight: bold;

            background-image: url("picture/1.jpg");

            background-repeat: no-repeat;

            -webkit-background-size: 40px 40px;

            background-size: 40px 40px;

        }

        .div1{

            background-origin: border-box;

            background-clip: border-box;

        }

        .div2{

            background-origin: padding-box;

            background-clip: padding-box;

            margin-top: 40px;

        }

        .div3{

            background-origin: content-box;

            background-clip: content-box;

            margin-top: 40px;

        }

    </style>

</head>

<body>

    <div class="div1">示例1</div>

    <div class="div2">示例2</div>

    <div class="div3">示例3</div>

</body>

</html>

结果：

3.background-size:设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。

　　background-size: auto | <长度值> | <百分比> | cover | contain

　　1、auto：默认值，不改变背景图片的原始高度和宽度；

　　2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；

　　3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；

　　4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；

　　5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

4.multiple backgrounds:多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值.

5.

语法缩写如下：

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

background-image:url1,url2,...,urlN;

background-repeat : repeat1,repeat2,...,repeatN;

backround-position : position1,position2,...,positionN;

background-size : size1,size2,...,sizeN;

background-attachment : attachment1,attachment2,...,attachmentN;

background-clip : clip1,clip2,...,clipN;

background-origin : origin1,origin2,...,originN;

background-color : color;

注意：

  1. 用逗号隔开每组 background 的缩写值；
  2. 如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
  3. 如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
  4. background-color 只能设置一个。

　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>背景</title>

    <style type="text/css">

        .div4{

            width: 500px;

            height: 600px;

            border: 5px solid #ff6471;

            background-image:url("picture/2.jpg") ,url("picture/1.jpg");

            background-repeat: repeat-x,no-repeat;

            background-position:center left;

            background-size:80px auto, 500px auto;

        }

    </style>

</head>

<body>

    <hr/>

    <div class="div4">

    </div>

</body>

</html>

结果：

　背景颜色渐变：

　　1.linear-gradient()

　　　　backgroud:linear-gradient(起点，起点颜色，过度色[可选]，终点颜色)

　　起点：top是从上到下，left是从左到右，如果定义成left top左上到右下。

　　过渡色：可以插入多个，表示多种颜色的渐变

　　2.radial-gradient()

　　　　方法创建一个<image>，用来展示由原点（渐变中心）辐射开的颜色渐变。这个方法得到的是一个CSS<gradient>数据类型的对象。

径向渐变(Radial gradients)由其中心点、边缘形状轮廓及位置、色值结束点（color stops）定义而成。  径向渐变的中心点至边缘形状以及其延伸的部分，由连续缩放的若干同心轮廓组成，这个轮廓由设定的边缘形状决定。色值结束点用于设定虚拟渐变射线（virtual gradient ray）的变化方式，由中心点水平变化至右侧（如图）。色值结束点由百分比设定时，则是相对于终点为渐变射线与边缘形状相交点的渐变半径，渐变半径的终点位置即为100%。每个轮廓均为纯色，颜色由渐变射线上相应横切点所定义的颜色决定。

边缘形状只能为圆形或者椭圆形,radial-gradient方法不允许循环渐变。需要循环渐变repeating-radial-gradient

CSS3---关于背景的更多相关文章

  1. CSS3之背景剪裁Background-clip

    CSS3之背景剪裁Background-clip是CSS3中新添加的内容.这个属性还是比较简单的,主要分五个属性值:border.padding.content.no-clip和text.下面将针对这 ...

  2. 基于CSS3动态背景登录框代码

    基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  3. CSS3透明背景+渐变样式

    CSS3透明背景+渐变样式 转载自博文:<CSS3透明背景+渐变样式> http://blog.csdn.net/netbug_nb/article/details/44343809 效果 ...

  4. CSS3之背景定位原点background-origin

    背景定位原点background-origin是CSS3新添加的有关背景的属性,主要是改变背景起始的原点位置的.CSS3之背景定位原点background-origin的属性值有三个:border.p ...

  5. 移动开发之css3实现背景几种渐变效果

    移动端背景渐变,非常的年轻,符合90后年轻一代的审美,css3的这个渐变目前主要是应用在手机前端领域. 产品设计中使用渐变色的好处:1:观众不至于眼睛过于疲劳(如果是浅色背景,3个小时下来极容易造成观 ...

  6. css3实现背景颜色渐变，文字颜色渐变，边框颜色渐变

    css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...

  7. 关于css3的背景渐变

    关于css3的渐变,目前各大浏览器还未做到很好的支持,所以需要在我们使用时加上各大浏览器前缀. -moz-:使用Mozilla内核的浏览器(Firefox浏览器) -webkit-:使用Webkit内 ...

  8. css3的背景颜色渐变@线性渐变

    背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); oper ...

  9. 用CSS3实现背景的固定

    今天放假了,正好最近养成了没事泡泡博客园的习惯,自己也有了博客..不得不吐槽一下博客园为什么页面这么古朴,,带的几个模版也没啥意思,反正不符合我口味,幸亏后台提供了编辑CSS的功能,于是我就搬来现有的 ...

  10. css3 Gradient背景

    css3的gradient分为两种:线性渐变(linear)和径向渐变(radial). 一.线性渐变linear-gradient 1.介绍 linear-gradient([设置方向],[设置开始 ...

随机推荐

  1. CCF2016.4 - C题

    思路:先把路径按反斜杠split成数组,然后用一个ArrayList去模拟.如果遇到空或者.则不处理:如果遇到..则删除ArrayList最后一个元素(注意如果只有1个元素则不删除):其他情况直接加到 ...

  2. 多线程 synchronized锁定当前对象

    synchronized(this) 和synchronized一样,都是锁定当前对象. public class Task { synchronized public void otherMetho ...

  3. Jquery | 基础 | 使用 jQuery 表单过滤选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. selenium中Xpath和CSS Selector的使用方法

    一.selenium中Xpath的使用方法 1. 什么是xpath? Xpath是XML的路径语言,通俗一点讲就是通过元素的路径来查找这个标签元素 2. 练习Xpath的工具 火狐浏览器,下载插件Fi ...

  5. vmware虚拟机启动centOs黑屏

    如图所示  , 我的VM 启动虚拟机之后就变成了上面的样子,一直不动,ping也ping不好,这个时候 : 1. 要么 内存不够了: 2. 要么 网络协议存在问题了: 本地windows环境在管理员的 ...

  6. Super Mario 树状数组离线 || 线段树

    Super Mario Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  7. P1615 西游记公司

    题目背景 一道极其无厘头的题目 题目描述 事情是这样的:西游记中的孙沙猪(孙杀猪)三徒弟在西天取经之后开始进入厦门大学经贸系学习经济,在1个小时的学习后,他们用暴力手段毕业了.然后,他们创办了三个公司 ...

  8. Dapper系列之二：Dapper的事务查询

    Dapepr讲解 上篇文章我们介绍了,什么是Dapepr,有什么好处,性能的对比,还有多表多数据添加操作(事务的封装)等等.本篇文章我们继续讲解.....如果本篇文章看不懂,请看我上一篇文章:Dape ...

  9. Oracle 十大SQL语句

    oracle数据库十大SQL语句             操作对象(object) /*创建对象 table,view,procedure,trigger*/ create object object ...

  10. redis过期事件

    背景:目前在商城项目,订单有过期逻辑,小伙伴提议用redis做,经讨论分析,redis有key的过期事件,貌似可以实现,但是咨询大神,好像不建议这样用,可能会丢数据 随便写了段python代码测试 i ...