css3背景相关样式属性

目录
文章目录隐藏
  1. background-origin
  2. background-clip
  3. background-size
  4. multiple backgrounds
  5. 制作导航菜单综合练习

background-origin

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

语法:

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

参数分别表示:

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

padding-box 表示内边距(默认值);

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

效果展示:

css3 背景相关样式属性

特别注意的是,如果背景不是 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。

效果:

css3 背景相关样式属性

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;
}

效果:

css3 背景相关样式属性

制作导航菜单综合练习

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;
}

效果如下图:

导航菜单

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

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » css3背景相关样式属性

发表回复