css3背景_动力节点Java学院整理


Posted in HTML / CSS onJuly 11, 2017

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 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 >
HTML / CSS 相关文章推荐
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
HTML5实现文件断点续传的方法
Jan 04 HTML / CSS
完美解决IE8下不兼容rgba()的问题
Mar 31 HTML / CSS
解决HTML5手机端页面缩放的问题
Oct 27 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 24 HTML / CSS
CSS3制作翻转效果_动力节点Java学院整理
Jul 11 #HTML / CSS
css3个性化字体_动力节点Java学院整理
Jul 12 #HTML / CSS
CSS3弹性布局内容对齐(justify-content)属性使用详解
Jul 31 #HTML / CSS
网页布局中CSS样式无效的十个重要原因详解
Aug 10 #HTML / CSS
css3实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 #HTML / CSS
Web前端绘制0.5像素的几种方法
Aug 11 #HTML / CSS
css3 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 #HTML / CSS
You might like
如何实现php图片等比例缩放
2015/07/28 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
JavaScript中的Window窗口对象
2008/01/16 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
js 走马灯简单实例
2013/11/21 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
javascript中Function类型详解
2015/04/28 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
Python os模块常用方法和属性总结
2020/02/20 Python
jupyter notebook实现显示行号
2020/04/13 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
四年级科学教学反思
2014/02/10 职场文书
干部考核评语
2014/04/29 职场文书
销售助理岗位职责
2015/02/11 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python
MySQL慢查询优化解决问题
2022/03/17 MySQL
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫