css3背景相关样式属性

background-origin

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

语法：

background-origin ： border-box | padding-box | content-box;

参数分别表示：

border-box 表示背景图片是从边框；

padding-box 表示内边距（默认值）；

content-box 表示是内容区域开始显示。

效果展示：

特别注意的是，如果背景不是 no-repeat，这个属性无效，它会从边框开始显示。

background-clip

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

语法：

background-clip ： border-box | padding-box | content-box | no-clip

参数分别表示

border-box 表示从边框向外裁剪背景；

padding-box 表示内填充向外裁剪背景；

content-box 表示内容区域向外裁剪背景。

no-clip 表示不裁切，和参数 border-box 显示同样的效果。backgroud-clip 默认值为 border-box。

效果：

background-size

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

语法：

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

取值说明：

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

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

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

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

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

具体效果到编辑器里输入自己的代码尝试不同取值的效果，这里不做过多演示。

multiple backgrounds

multiple backgrounds

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

语法缩写如下：

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 只能设置一个。

通过例子看一下

html 代码：

<div class="demo"></div>

html 代码：

.demo{
    width: 300px;
    height: 140px;
    border: 1px solid #999;
    
    background-image: url(http://img.mybj123.com/54cf2365000140e600740095.jpg),
                      url(http://img.mybj123.com/54cf238a0001728d00740095.jpg),
                      url(http://img.mybj123.com/54cf23b60001fd9700740096.jpg);
    background-position: left top, 100px 0, 200px 0;
    background-repeat: no-repeat, no-repeat, no-repeat;
    
    margin:0 0 20px 0;
}

效果：

制作导航菜单综合练习

html 代码：

<ul class="nav">
    <li><a href="">Home</a></li>
    <li><a href="">About Me</a></li>
    <li><a href="">Portfolio</a></li>
    <li><a href="">Blog</a></li>
    <li><a href="">Resources</a></li>
    <li><a href="">Contact Me</a></li>
</ul>

css 代码：

.nav{
  width:560px;
  height: 50px;
  font:bold 0/50px Arial;
  text-align:center;
  margin:40px auto 0;
  background: #f65f57;
  /*制作圆*/
  border-radius:10px;

  /*制作导航立体风格*/
  box-shadow:0 5px #000;
  
}
.nav a{
  display: inline-block;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.nav a:hover{
  -webkit-transform:rotate(10deg);
  -moz-transform:rotate(10deg);
  -o-transform:rotate(10deg);
  -ms-transform:rotate(10deg);
  transform:rotate(10deg);
}

.nav li{
  position:relative;
  display:inline-block;
  padding:0 16px;
  font-size: 13px;
  text-shadow:1px 2px 4px rgba(0,0,0,.5);
  list-style: none outside none;
}
/*使用伪元素制作导航列表项分隔线*/
/*制作导航分隔线效果*/
.nav li::before,
.nav li::after{
  content:"";
  position:absolute;
  top:14px;
  height: 25px;
  width: 1px;
}
.nav li::after{
  right: 0;
  background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
  background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
  background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
  background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
  background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
}
.nav li::before{
  left: 0;
  background: -moz-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
  background: -webkit-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
  background: -o-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
  background: -ms-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
  background: linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
}
/*删除导航第一个导航项左边的分隔线*/
.nav li:first-child::before{
  background: none;
}
/*删除第一项和最后一项导航分隔线*/
.nav li:last-child::after{
	  background: none;
	}
.nav a,.nav a:hover{
  color:#fff;
  text-decoration: none;
}

效果如下图：

是不是很炫酷，喜欢的赶紧下去联系一下吧

以上关于css3背景相关样式属性的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。