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

\

对于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:图片自动缩放直到适应且填充整个标签元素

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

8、Background Attachment 的调整

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



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

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

相关文章

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

效果图今天给大家带来的是CSS3动画天气图标代码,简单实用好看!CSS源码: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社群的小伙伴还是很爱学习的,这不,有一位小伙伴看到“特殊”图表表达,想知道是怎么做出来的。这种学习的思路非常好,看到好的表达就想学习,这是非常好的收集习惯,能够积累…

Spring MVC:表单处理卷。 5 –选择,选项,选项标签

下拉列表是Web表单中最常见的元素之一。 在HTML中&#xff0c;可以使用适当的标签创建此类控件&#xff1a; <form&#xff1a;select> –下拉列表的父标签和<form&#xff1a;option> – <form&#xff1a;select>标签的子标签。 Spring MVC标签库为下拉列表…

Python的看门狗实现自动化实时对服务器、Windows或Linux文件夹的实时监控

众所周知&#xff0c;在运维过程中&#xff0c;实时获取目标文件夹至关重要&#xff0c;Python的watchdog是用程序来监视文件系统事件Python库&#xff0c;所以用该库可以实现对文件夹的实时监控&#xff0c;filenotify.py代码如下&#xff1a; # -*- coding: utf-8 -*- #!/usr…

在html中样式表的三种类型,css样式有哪几种类型?

CSS样式可以写在哪些地方呢&#xff1f;从CSS 样式代码插入的形式来看基本可以分为以下3种&#xff1a;内联式、嵌入式和外部式三种。下面本篇文章就来给大家介绍一下CSS样式的类型&#xff0c;希望对大家有所帮助。内联式样式内联式css样式表就是把css代码直接写在现有的HTML标…

记录合规性–关于TCK,规格和测试

使用软件规格非常困难。 不论在哪个地方提出&#xff1b; 您最终遇到了一个大问题&#xff1a;是否已实施并测试了所有指定的内容&#xff1f; 在瀑布驱动的方法学时代&#xff0c;这一直是一个问题&#xff0c;即使在撰写本文的今天&#xff0c;敏捷性和用户故事仍然不能保证您…

arcgis已试图对空几何执行该操作_ArcGIS中地理配准与空间校正的不同

ArcGIS中地理配准与空间校正都是用于数据坐标变换的目的&#xff0c;他们之间有什么区别呢&#xff1f;1、处理对象不同&#xff1a;地理配准针对栅格数据&#xff0c;而空间校正针对矢量数据。因此空间校正需要建立在矢量数据编辑的基础上&#xff0c;空间校正之前应开始编辑。…

【计算机视觉】深度学习视觉领域常用数据集汇总

本文结合笔者在研究生学习、科研期间使用过以及阅读文献了解到的深度学习视觉领域常用的开源数据集&#xff0c;进行介绍和汇总。MNIST深度学习领域的“Hello World!”&#xff0c;入门必备&#xff01;MNIST是一个手写数字数据库&#xff0c;它有60000个训练样本集和10000个测…

JavaScript高级特征之面向对象笔记

Javascript面向对象&#xff1a;函数&#xff1a; * Arguments对象&#xff1a; * Arguments对象是数组对象 * Arguments对象的length属性可以获取参数的个数 * 利用Arguments对象模拟函数的重载效果&#xff08;javascript中不存在函…

绘图用计算机软件的基本种类有,主编教您电脑绘图软件有哪些

绘图软件是指专业人员根据一定准则设计的用于计算机绘图软件程序&#xff0c;种类非常多&#xff0c;通过它们可以满足足广大用户的基本绘图要求。下面&#xff0c;我就给大家介绍电脑绘图软件有哪些。电脑是根据指令进行高速计算的电子设备&#xff0c;功能强大&#xff0c;时…

HTML浮动导致高度塌陷,HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法(高度欺骗)...

元素浮动定义float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像&#xff0c;使文本围绕在图像周围&#xff0c;不过在 CSS 中&#xff0c;任何元素都可以浮动。浮动元素会生成一个块级框&#xff0c;而不论它本身是何种元素。如果浮动非替换元素&#xff0c;则要指定…

Python API简单验证

前言 因为CMDB内部的需求&#xff0c;需要一个API进行数据传输&#xff0c;用来传递需要抓取的服务端信息信息给抓取的autoclient&#xff0c;autoclient抓取好之后再通过API传输到服务器&#xff0c;保存到数据库。但是为了防止恶意的API访问&#xff0c;需要做一个验证。 设想…

前端js编码

1、首先是encodeURI和encodeURIComponent&#xff1b; 从名字可以清晰的看出他两都是主要用于url编码的&#xff0c;那之间有什么区别呢&#xff1f;唯一区别就是编码的字符范围&#xff0c;其中 encodeURI方法不会对下列字符编码 ASCII字母、数字、~!#$&*():/,;?&#x…

Python中 sys.argv[]的用法简明解释

Python中 sys.argv[]的用法简明解释 因为是看书自学的python,开始后不久就遇到了这个引入的模块函数&#xff0c;且一直在IDLE上编辑了后运行&#xff0c;试图从结果发现它的用途&#xff0c;然而结果一直都是没结果&#xff0c;也在网上查了许多&#xff0c;但发现这个问题的比…

文件上传漏洞及其绕过、对策、过狗

1. 文件包含上传&#xff1a; php://input属于php内置的封装协议&#xff0c;其实都主要是include&#xff08;&#xff09;函数处理不当如果有文件是以下写法&#xff0c;xxx随便&#xff1a;<?phpinclude($_GET[xxx]);?> 以上保存到test.php&#xff0c; 我们访问ht…

一维二维_更高效的一维、二维材料过渡态搜索

前言本文中&#xff0c;我们首先介绍如何使用NEB方法搜索过渡态&#xff0c;以及在NEB的结果的基础上&#xff0c;进一步提高精度优化出高精度、可验证的过渡态。本文以MoS2的一维条带(其中一个Mo原子被Co替代掺杂)为例进行演示。一般来说&#xff0c;这种反应&#xff0c;周期…

Mybatis之逆向工程

前面几篇基本把mybatis简单使用学习了下,今天学习下mybatis逆向工程&#xff0c;我们在开发中经常需要先设计数据库表结构或者先设计model,那就是能不能有工具可以只需在一边设计之后另一边自动生成呢&#xff1f;于是逆向工程来了。这里的逆向功能是通过数据库的表生成java po…

2023航天推进理论基础考试划重点(W老师)-液体火箭发动机1

适用于期末周求生欲满满的西北工业大学学生。 1、液体火箭发动机的基本组成及功能是什么&#xff1f; 推力室组件、推进剂供应系统、阀门与调节器、发动机总装元件等组成。 2、液体火箭发动机的分类和应用是什么&#xff1f;3、液体火箭发动机系统、分系统的概念是什么&…

Java EE 7是最终版本。 思想,见解和进一步的指针。

我们花了不到三年的时间才推出了下一个Java EE版本 。 今年4月16日&#xff0c; JCP EC对JSR 342进行了投票并获得批准。 这是一个成功的故事&#xff0c;因为在去年八月下旬的最后时刻撤消了拥有云就绪平台的最初想法。 作为EG的成员&#xff0c;撰写即将发布的功能或多或少容…

dbgrideh指定某单元格变色_一招搞定按指定名称批量新建文件夹

文 / 雷哥小鱼儿 编辑 / 小瓜子假如你有一个100行的Excel名单文件。业务需要&#xff0c;需要按姓名单独做成一个个文件夹。普通小白做法&#xff1a;用复制粘贴大法一个个去修改文件夹名字........雷哥Tips&#xff1a;EXCEL中为了实现某目标&#xff0c;出现了N次重复的操作…