CSS3详解:background

CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强。

1、多个背景图片

在css3里面,你可以再一个标签元素里应用多个背景图片。代码类似与css2.0版本的写法,但引用图片之间需用“,”逗号隔开。第一个图片是定位在元素最上面的背景,后面的背景图片依次在它下面显示,如下:

background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

2、新属性:Background Clip

此讨论让我们回到文章开始提到的关于背景被border边框遮挡的问题。background-clip的添加让我们完全能够控制背景显示的位置。属性值如下:
(1)background-clip: border;背景在border边框下开始显示
(2)background-clip: padding;背景在padding下开始显示,而不是border边框下开始
(3)background-clip: content;背景在内容区域下开始显示,而不是border边框下开始或padding下开始。
(4)background-clip: no-clip;默认属性值,类似与background-clip: border;

3、新属性: Background Origin

此属性需要与background-position配合使用。你可以用background-position计算定位是从border,padding或content boxes内容区域算起。(类似background-clip)
(1)background-origin:border;
从border边框位置算起
(2)background-origin:padding;
从padding位置算起
(3)background-origin:content;
从content-box内容区域位置算起;

background-clip和background-origin的不同之处www.CSS3.info网站给做了很好的分析讲解。

4、新属性:Background  Size

Background Size属性用来重设你的背景图片。有几个属性值:
(1)background-size: contain;
缩小背景图片使其适应标签元素(主要是像素方面的比率)
(2)background-size: cover;
让背景图片放大延伸到整个标签元素大小(主要是像素方面的比率)
(3)background-size: 100px 100px;
标明背景图片缩放的尺寸大小
(4)background-size: 50% 100%;
百分比是根据内容标签元素大小,来缩放图片的尺寸大小

你可以去CSS 3 specifications站点看一下简单的案例说明。

5、新属性:Background Break

css3里标签元素能被分在不同区域(如:让内联元素span跨多行),background-break属性能够控制背景在不同区域显示。
属性值:

(1)Background-break: continuous;
此属性是默认值,忽视区域之间的间隔空隙(给它们应用图片就好像把它们看成一个区域一样)
(2)Background-break: bounding-box;
重新考虑区域之间的间隔
(3)Background-break: each-box;
对每一个独立的标签区域进行背景的重新划分。

6、背景颜色的调整

background-color属性在css3版本里面稍微做了增强,除了指定background color背景颜色之外,还可以对不使用的标签元素背景图片进行去色处理。

background-color: green / blue;此例子里,这背景颜色可能是绿色,然而,如果底部背景图片无效的话,蓝色将代替绿色来显示。如果你没有指定某个颜色的话,它将其视为透明。

7、背景重复的调整

css2里当设置背景的时候,它经常被标签元素截取而显示不全,css3介绍了2个新属性来修复此问题。
space:图片以相同的间距平铺且填充整个标签元素
round:图片自动缩放直到适应且填充整个标签元素

CSS 3 specifications网站对background-repeat: space的使用就是一个现成的例子。

8、Background Attachment 的调整

Background Attachment有了一个新属性值:local,当标签元素滚动时它才有效(如设置overflow:scroll;),当background-attachment设置为scroll时,背景图片是不随内容滚条滚动的。现在,有了background-attachment:local,就可以做到让背景随元素内容滚动而滚动了。



本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367947.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

里bl2和bl3为什么分开_英国的水池为什么有两个水龙头?为什么英国有独立的冷热水龙头?...

如果大家看过我之前的文章,可能会有点映像,前面有提到过英国的双水龙头,有兴趣的朋友们可以点后面的直达链接查看:为什么在英国留学会掉头发?怎么办?英国的自来水(冷水)可以直接喝吗…

html5中折叠面板,Ant Design中折叠面板Collapse

这段时间做react项目遇到一些平常并不会去在意的问题,但解决的时候又需要思考一番。这次开发用到了蚂蚁金服的UI框架Ant Design。项目中有一个模块的样式和功能用到了折叠面板Collapse组件来实现。但是开发完成后有一个问题被产品提到了。问题是这样的,因…

在JBoss的服务器端正确解码URL参数

我今天花了很多时间来弄清楚如何在运行在JBoss上的JSF应用程序中(使用JBoss 7 Final)强制正确解码编码的字符。 当您有例如通过URL传递中文字符时,就会出现此问题。 假设您有指点事件,编码为%E6%8C&#xf…

三剑客 老大:awk命令用法

awk是一种编程语言,用于在linux/unix下对文本和数据进行处理。数据可以来自标准输入(stdin)、一 个或多个文件,或其它命令的输出。它支持用户自定义函数和动态正则表达式等先进功能,是linux/unix下的一个强大编程工具。它在命令行中使用&…

SpriteKit在复制节点时留了一个巨坑给开发者,需要开发者手动把复制节点的isPaused设置为false...

根据When an overlay node with actions is copied there is currently a SpriteKit bug where the node’s isPaused property might be set to true提示,SpriteKit有一个Bug需要开发者自己来填。 SpriteNode节点在被copy()复制后,会自动被设置为暂停&a…

HTML5 Shiv #8211; 让该死的IE系列支持HTML5吧

下面是引用Google的html5.js文件&#xff0c;好处就不说了&#xff1a; <!--[if IE]><script src”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>< ![endif]--> 将上代码复制到head部分&#xff0c;记住一定要是head部分&#xf…

android如何导入活动,关于android:如何将活动值传递给另一个活动(Kotlin)

我是Kotlin的新手&#xff0c;我正在尝试为我的应用进行设置活动&#xff0c;我希望该活动将其价值传递给其他活动。 我尝试了不同的代码&#xff0c;但没有一个起作用&#xff0c;我尝试制作一个共享的首选项文件&#xff0c;但我不知道如何编写代码要清楚&#xff0c;我想将字…

Mockito –带有注释和静态方法的额外接口

在代码中&#xff0c;我最近遇到了一段非常糟糕的代码&#xff0c;这些代码基于对对象执行某些操作的类转换。 当然&#xff0c;代码需要重构&#xff0c;但是如果您首先没有对该功能进行单元测试&#xff0c;则有时您可能无法做到/或者不想这样做&#xff08;这应该是可以理解…

怎么把原来的墙拆掉_家装拆除不是简单的砸砸墙,它也是有技术的

装修拆除中有很多人认为&#xff0c;拆除施工没有什么技术含量&#xff0c;感觉就像小品演的那样&#xff0c;挥挥大锤砸砸墙就可以了。所以有的人图便宜就从马路上随便找的工人来砸墙&#xff0c;他们不管是不是承重墙&#xff0c;只要业主要求他们就敢咋&#xff0c;后果真有…

20180209-os模块

下面将学习关于os模块的相关操作 项目练习的目录结构如下&#xff1a;所有的操作都是基于os_exercise.py模块 1.获取当前的Python脚本的工作目录路径 os.getcwd() # 1.获取当前目录 dir os.getcwd() print(获取当前python脚本工作目录:,dir) # 输出 # 获取当前python脚本工作目…

UOJ #188. 【UR #13】Sanrd

Description 给定 \(\sum_{il}^r f[i]\)\(f[i]\) 把 \(i\) 的每一个质因子都从小到大排列成一个序列(\(p_i^{c_i}\)要出现 \(c_i\) 次)后 , 第二大的质因子.题面 Solution 符合 \(Min25\) 筛的处理顺序. 递归处理每个质因子作为次大值时的贡献,和不作为次大值时贡献的方案数 , …

关于IE6.7.8.FF兼容的问题

所有浏览器 通用 height: 100px; IE6 专用 _height: 100px;IE6 专用 *height: 100px; IE7 专用 * height: 100px; IE7、FF 共用 height: 100px !important; 一、CSS 兼容 以下两种方法几乎能解决现今所有兼容. 1, !important (不是很推荐&#xff0c;用下面的一种感觉最安…

冯珊珊_模拟器企业衡泰信签约冯珊珊,推动高尔夫运动下沉

9月21日&#xff0c;著名高尔夫模拟器企业衡泰信宣布签约中国高尔夫球员冯珊珊&#xff0c;双方正式达成全面战略合作&#xff0c;旨在共同推动室内高尔夫运动的普及与推广&#xff0c;让更多人参与并喜爱上这项运动&#xff0c;推动全民健身目标&#xff0c;借助互联网、智慧场…

MOXy是GlassFish 4中新的默认JSON绑定提供程序

GlassFish 4现在可以提供完整的Java EE 7&#xff08;JSR-342&#xff09;平台。 EclipseLink为该发行版做出了一些重大贡献。 首先是提供JPA 2.1&#xff08;JSR-338&#xff09;实现。 我将在本文中介绍的第二个内容是EclipseLink MOXy&#xff0c;它现在是JAX-RS应用程序的默…

假期第四周周总结

第四周&#xff1a; 本周做了什么&#xff1a;由于第一次科三没过&#xff0c;只能再约一次&#xff0c;两天在练科三&#xff0c;其他时间都在安装oracle&#xff0c;虚拟机&#xff0c;并配置环境&#xff0c;学习oracle数据库&#xff0c;并改进河北创新科技平台系统 收获是…

通过form实现enter事件

结构 <form action‘#’> <input typesearch /> <button>搜索</button> </form> 在这种情况下即使给button加上事件&#xff0c;按enter键也会执行点击事件中的代码&#xff08;pc-移动web皆可以&#xff09;。&#xff08;action需为javascript…

CSS3之background的调整和增加的属性

对于background做了一些修改&#xff0c;最明显的一个就是采用设置多背景&#xff0c;不但添加了4个新属性&#xff0c;并且还对目前的属性进行了调整增强。 1、多个背景图片 在css3里面&#xff0c;你可以再一个标签元素里应用多个背景图片。代码类似与css2.0版本的写法&…

html 天气特效,用CSS制作天气特效动画,源码分享

效果图今天给大家带来的是CSS3动画天气图标代码&#xff0c;简单实用好看&#xff01;CSS源码&#xff1a;html { box-sizing: border-box; }html *,html *:before,html *:after { box-sizing: inherit; }body {max-width: 42em;padding: 2em;margin: 0 auto;color: #161616;fo…

做折线图坐标轴数字_Excel折线图表的另类表达制作?牛闪君使用了双线表达法来完成...

牛闪闪办公第846个原创技巧Zloffice社群的小伙伴还是很爱学习的&#xff0c;这不&#xff0c;有一位小伙伴看到“特殊”图表表达&#xff0c;想知道是怎么做出来的。这种学习的思路非常好&#xff0c;看到好的表达就想学习&#xff0c;这是非常好的收集习惯&#xff0c;能够积累…

Spring MVC控制器的单元测试:“普通”控制器

本教程的第一部分描述了如何配置使用Spring MVC Test框架的单元测试 。 现在是时候动手做&#xff0c;学习如何为“常规”控制器编写单元测试了。 显而易见的下一个问题是&#xff1a; 什么是普通控制器&#xff1f; 好吧&#xff0c;一个普通的控制器&#xff08;在此博客文…