css3背景_动力节点Java学院整理
发布时间：2017-07-11 10:30:40 作者：net_lover 
我要评论
我要评论这篇文章主要介绍了css3背景,CSS3规范中对背景这一部分，新加入了一些令人兴奋的功能，如可以设置多个背景图片、可以指定背景大小、设置背景渐变等功能。
CSS3规范中对背景这一部分，新加入了一些令人兴奋的功能，如可以设置多个背景图片、可以指定背景大小、设置背景渐变等功能。CSS3规范中定义的背景属性有：
|
属性名
|
可能的值
|
默认值
|
|
background
|
是一种简写方式：bg-image || bg-position || / bg-size || repeat-style || attachment || bg-origin，最后一个背景层可以设置background-color
|
|
|
background-attachment
|
scroll | fixed | local
|
scroll
|
|
background-clip
|
border-box | padding-box 表示背景渲染的方法：padding box表示背景在padding box内渲染；border-box表示背景在border-box内渲染
|
border-box
|
|
background-color
|
<color>
|
transparent
|
|
background-image
|
image | none 可以设置多个背景图，以逗号（,）分隔开。none也代表一个背景层
|
none
|
|
background-origin
|
border-box | padding-box | content-box 背景相对的位置，相对于上面3个值中的一个。
|
padding-box
|
|
background-position
|
% length top right bottom left center 这些属性的设置方法跟以前类似
|
0% 0%
|
|
background-repeat
|
repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2} 平铺方式
|
repeat
|
|
background-size
|
[length | % | auto ]{1,2} | cover | contain 设置背景的大小。contain表示按比例缩放占据最大高度或者宽度的背景；cover表示铺满整个背景。
|
auto
|
下面我们以5个例子来说明一些新的CSS3的功能。其中，CSS3允许设置多个背景图片，每个背景图片占一层，层的上下按照在CSS中写的顺序来定，最先写的背景在最上层。
background:url(http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg) 0 0 no-repeat,
url(http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg) 200px 0 no-repeat,
url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg") 400px 201px no-repeat;
是背景的简写方式，除了默认值之外，等效于下面的写法：
background-image:url("http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg"),url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg"),url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 0 0, 200px 0, 400px 201px;
另外一个需要注意的是：背景渐渐也是一个背景层，所以在例子4中
background-image:-moz-linear-gradient(left, rgba(0, 255, 0, 1), rgba(255, 0, 0, 0)),
url(http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg);
的写法顺序不能颠倒，如果写成
background-image:url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg"),
-moz-linear-gradient(left, rgba(0, 255, 0, 1), rgba(255, 0, 0, 0));
就看不出渐变效果了。
例子的全部源代码如下：
< style type ="text/css" >
div{font-size:24px;font-weight:bo;d;color:#f00;text-align:right;margin:10px 0;}
#div1
{
height:400px;width:600px;
border:4px solid orange;
background-image:url("http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg"),url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg"),url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 0 0, 200px 0, 400px 201px;
}
#div2
{
height:400px;width:600px;
border:4px solid orange;
background:url(http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg) 0 0 no-repeat,
url(http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg) 200px 0 no-repeat,
url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg") 400px 201px no-repeat;
}
#div3
{
height:100px;width:600px;
border:4px solid orange;
background-image: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
}
#div4
{
height:100px;width:600px;
border:4px solid orange;
background-image:-moz-linear-gradient(left, rgba(0, 255, 0, 1), rgba(255, 0, 0, 0)),
url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg");
}
#div5
{
height:400px;width:600px;
border:4px solid orange;
background-image:url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg");
-moz-background-size:cover;
background-repeat:no-repeat;
}
</ style >
< div id ="div1" > div1 </ div >
< div id ="div2" > div2 </ div >
< div id ="div3" > div3 </ div >
< div id ="div4" > div4 </ div >
< div id ="div5" > div5 </ div >
相关文章
- 前几天在工作的时候遇到一个问题，项目需要实现一个效果，当鼠标移入一个元素的时候，元素出现一个动态的边框，通过网上查找资料看到有人推荐可以使用Css3来实现，后来试了2016-11-08
- 这篇文章给大家介绍的是，利用CSS3实现当点击按钮的时候，按钮的背景是渐变动画的效果，实现后的效果非常好，开发的时候利用这种效果的按钮会给用户一种非常酷炫的感受，感2016-10-19
- 这篇文章主要介绍了CSS3条纹背景制作的实战攻略,根据Forefox浏览器和webkit内核的浏览器两种情况来分别讲解,需要的朋友可以参考下2016-05-31
- 这篇文章主要介绍了使用CSS3实现多列布局与多背景的技巧,包括多列栏目的高度平衡和多间隙等一些细节方面的调整方法讲解,需要的朋友可以参考下2016-02-29
- 这篇文章主要介绍了用CSS3实现背景渐变的方法,作者并没有给出效果demo这个比较残念...需要的朋友可以参考下2015-07-14
- background-size是css3提供的一个新特性，它可以让你随心所欲的控制背景图片的大小。下面我们来一步步看看这个新特性都有什么值得我们惊艳的地方2014-09-02
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
使用CSS3 的背景渐变 -webkit-gradient ，用一个背景渐变的 DIV 代替图片。下面是实现效果示例，相比以上方案优点是不使用图片，减小请求量和流量2014-08-19- CSS背景动画很长时间以来都是一个热门话题，很多时候都是因为效果特别绚丽，而且不需要额外的技术。最近有人问我是否可以给页面上一个指定的元素安排多重背景动画，答案是y2014-04-04
- CSS3之多背景background和CSS2的使用方法一样，只不过图片可以从1个图片变成多个图片了，其在CSS3的项目中运用比较广泛，大家有更好的案例要积极分享哟2013-10-18
- CSS3背景尺寸Background-size，这个属性是改变背景尺寸的通过各种不同是属性值改变背景尺寸呈现的大小，下面为大家详细介绍下其语法、浏览器兼容及使用示例，感兴趣的朋友2013-10-14
最新评论