企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

css3背景相关样式属性

CSS3教程 码云 34℃ 0评论
目录
[隐藏]

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.mukewang.com/54cf2365000140e600740095.jpg),
                      url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),
                      url(http://img.mukewang.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;
}

效果如下图:

导航菜单

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

转载请注明:码云笔记 » css3背景相关样式属性

喜欢 (1)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址