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控制器的单元测试:“普通”控制器

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

回溯法

一、概念&#xff1a;回溯法也是一种枚举&#xff0c;但是回溯法将枚举(生成&#xff09;和检查有机结合起来&#xff0c;从而减少了不必要的枚举。。 二、经典八皇后问题。 #include<iostream> #include<cmath> using namespace std;int vis[100]; int store[100]…

【Spring】入门HelloWorld

参考&#xff1a;https://www.yiibai.com/spring/spring-tutorial-for-beginners.html 一、创建项目 1.利用IntelliJ创建Maven项目2.配置pom.xml,引入Spring <?xml version"1.0" encoding"UTF-8"?> 4.0.0 <groupId>com.jh</groupId> &…

html属性可以用来定义内联样式,18年6月考试《网页设计与制作》期末大作业.doc...

...(单选题) 1: 以下HTML代码&#xff0c;判断正确的是( )。 A: 错了B: “button”双引号错了(应为单引号)C: 第2、3行应加入…….D: 没有错误正确答案:(单选题) 2: 数据库的基本操作是( )。A: 增&#xff0c;删&#xff0c;改&#xff0c;查B: 增&#xff0c;删&#xff0c;加…

DIV CSS初学者需重视的10个简单问题与技巧

DIVCSS初学者往往感觉自己遇到很多莫明其妙的问题&#xff0c;其实只是一些小细节没有引起重视&#xff0c;下面罗列了10个问题与技巧&#xff0c;温故而知新。 一、检查HTML元素是否有拼写错误、是否忘记结束标记即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验…

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

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

06.linux平台下运行go文件

1.获取linux位数 getconf LONG_BIT 2.下载地址&#xff1a; https://studygolang.com/dl 3.解压安装包 sudo tar -xzf go1.9.2.linux-amd64.tar.gz -C /usr/local 4.设置环境变量 sudo vi /etc/profile export GOROOT/usr/local/go export GOBIN$GOROOT/bin export GOPATH/h…

python3读取ini文件_python3配置文件ini读取方法

1.最常用的Plain text形式的配置文件 1.1首选 .init 文件 标准库 configparser 1.2次选 csv文件 与 Unix/Linux 下常用的 xx xxx形式的配置文件 分别是标准库csv 与 shlex 2.最常用的二进制级配置文件 2.1持久化数据首选shelve 标准库 shelve 2.2shelve的对于一些项目我们需要…

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标…

DIV CSS浏览器的兼容性

1. 文字本身的大小不兼容。同样是font-size:14px的宋体文字&#xff0c;在不同浏览器下占的空间是不一样的&#xff0c;ie下实际占高16px&#xff0c;下留白3px&#xff0c;ff 下实际占高17px&#xff0c;上留白1px&#xff0c;下留白3px&#xff0c;opera下就更不一样了。解决…

记录合规性–关于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个测…

CSS Hack 汇总速查一览

由于浏览器之间存在兼容性问题&#xff0c;在制作网页的时候&#xff0c;为了使页面能在不同浏览器中显示相对一致或者其他原因&#xff0c;网页制作人员总结了种种 Hack 方法&#xff1b;在解 决兼容性问题之前&#xff0c;这些方法还经常会用到。接下来&#xff0c;大前端将给…

玩游戏4g计算机的内存不足,玩游戏时出现存储空间不足, 无法完成此操作, 到底是何原因?...

游戏是Just Cause 2(即《正当防卫2》, 对不&#xff1f;这款游戏需要很高的硬件配置&#xff0c;显卡必须在DirectX10以上才行;你的是什么显卡&#xff1f;请确保安装了最新的.NET和DX10&#xff1b;另我搜索到下面的解决方法&#xff0c;仅供参考&#xff1a;解决方法&#xf…

win10安装opcenum_Win10提示Windows无法安装到GPT分区形式磁盘

Win10系统提示Windows无法安装到GPT分区形式磁盘该怎么办&#xff1f;最近有用户反映说在安装Win10原版系统的时候&#xff0c;采用的是U盘安装Win10的方法&#xff0c;到磁盘选择这一项的时候&#xff0c;选中C盘不能安装&#xff0c;提示&#xff1a;Windows无法安装到这个磁…

JPA 2 | EntityManagers,事务及其周围的一切

介绍 对我来说&#xff0c;最令人困惑和不清楚的事情之一是&#xff0c;作为Java开发人员&#xff0c;一直是围绕事务管理的谜团&#xff0c;尤其是JPA如何处理事务管理。 事务什么时候开始&#xff0c;什么时候结束&#xff0c;实体的持久化方式&#xff0c;持久性上下文等等。…