位置:首页 » 教程 » CSS教程:CSS定位属性

CSS教程:CSS定位属性

日期:2009-08-02 阅读:0num
Advertisement
网页制作poluoluo文章简介:CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务.

  CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。

  定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然,这个功能非常强大,也很让人吃惊。要知道,用户代理对 CSS2 中定位的支持远胜于对其它方面的支持,对此不应感到奇怪。

  另一方面,CSS1 中首次提出了浮动,它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位,不过,它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。

一切皆为框

  div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容 ,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。

  您可以使用 display 属性 改变生成的框的类型。这意味着,通过将 display 属性设置为 block,可以让行内元素(比如 <a> 元素)表现得像块级元素一样。还可以通过把 display 设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档中的空间。

  但是在一种情况下,即使没有进行显式定义,也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素(比如 div)的开头。即使没有把这些文本定义为段落,它也会被当作段落对待:

<div>
some text
<p>Some more text.</p>
</div>

  在这种情况下,这个框称为无名块框,因为它不与专门定义的元素相关联。

  块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式,因为没有可以应用样式的地方(注意,行框和行内框是两个概念)。但是,这有助于理解在屏幕上看到的所有东西都形成某种框。

CSS 定位机制

  CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

  除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 X(HTML) 中的位置决定。

  块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。

  行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box) ,行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。

  在下面,我们会为您详细讲解相对定位、绝对定位和浮动。

CSS position 属性

  通过使用 position 属性 ,我们可以选择 4 中不同类型的定位,这会影响元素框生成的方式。
  position 属性值的含义:
  static
  元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
  relative
  元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
  absolute
  元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
  fixed
  元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
  提示: 相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

CSS 定位属性

  CSS 定位属性允许你对元素进行定位。
  属性 描述
  position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
  top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
  left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  overflow 设置当元素的内容溢出其区域时发生的事情。
  clip 设置元素的形状。元素被剪入这个形状之中,然后显示出来。
  vertical-align 设置元素的垂直对齐方式。
  z-index 设置元素的堆叠顺序。

相关文章
  • CSS教程:padding属性定义边内补白

    网页制作poluoluo文章简介:CSS教程:padding属性定义边内补白. 边框的里面可以有一层边内补白(padding),边内补白定义了边框与边框里面内容的距离. 边内补白分为上边内补白(top),下边内补白(bottom),左边内补白(left),右边内补白(right). 边内补白只有width一种属性. 相关教程:CSS教程:margin属性定义边外补白 padding -- 定义边内补白 取值: <padding-width>{1,4} | inherit <padding

  • CSS教程:margin属性定义边外补白

    网页制作poluoluo文章简介:CSS教程:margin属性定义边外补白. 边框的外面可以有一层边外补白(margin),边外补白可以把块级元素分开.边外补白定义了围绕某种元素(elements)的空白. 可以查看盒模式,了解边外补白和边内补白. 边外补白分为上边外补白(top),下边外补白(bottom),左边外补白(left),右边外补白(right). 边外补白只有宽度width一种属性. margin -- 定义边外补白 取值: <margin-width>{1,4} | inher

  • CSS教程:CSS控制浏览器滚动条的源代码

    网页制作poluoluo文章简介:CSS教程:CSS控制浏览器滚动条的样式源代码:1.overflow内容溢出时的设置 1.overflow内容溢出时的设置 overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值).scroll.hidden.auto. 2.scrollbar-3d-light-color立体滚动条亮边的颜色 scrollbar-arrow-color上下按钮上三角箭头的颜色 scrollbar-

  • CSS教程:CSS定位属性

    网页制作poluoluo文章简介:CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.显然,这个功能非常强大,也很让人吃惊

  • CSS教程:CSS文本样式全攻略 CSS教程:CSS文本样式全攻略

    网页制作poluoluo文章简介:由于 Web 是 HTML 文档的集合体--有些是动态的,有些是静态的,有些是功能性的--它们的排版所遵循的惯例来自于我们的最佳参考对象:六个世纪的印刷传统.这种传统包括了排?5峭缡且桓鋈露医厝徊煌拿教澹杂谕镜呐虐胬此担颐切枰杂∷⑸杓凭弑敢?/font> 序言 由于 Web 是 HTML 文档的集合体--有些是动态的,有些是静态的,有些是功能性的--它们的排版所遵循的惯例来自于我们的最佳参考对象:六个世纪的印刷传统.这种传统包括了排印.但是网络

  • css教程:css和document css教程:css和document

    Cascading Style Sheets: The Definitive Guide, 2nd Edition is a thorough review of all aspects of CSS2.1 and a comprehensive guide to CSS implementation. The book includes new content on positioning, lists and generated content, table layout, user int

  • CSS教程:容器定位

    原文:http://www.linxz.cn/blog2/article.asp?id=140 很神奇的一个晚上,居然在以前老同事的群里跟同事讨论起CSS的东西来了,不过很意外的还是有收获.在IE中常常会碰到如果将容器定位后,出现容器内的文字不可选择(测试的时候主要用带连接的文字). xhtml结构: <div> <a href="#">定位后无法选择容器的内容解决方案</a> </div> css样式: div { position:a

  • CSS教程:CSS属性behavior的语法

    网页制作poluoluo文章简介:CSS属性behavior的语法及介绍. 在进行CSS网页布局的时候,我们经遇到刷新要保留表单里内容的时候,习惯的做法使用cookie,但是那样做实在是很麻烦,css中的behavior就为我们很好的解决了这个问题.今天poluoluo.com就向大家介绍CSS属性behavior的语法 behavior的语法: behavior : url ( url ) | url ( #objID ) | url ( #default#behaviorName ) 取值:

  • CSS教程:背景background属性应用

    poluoluo文章简介:背景background:background-image:url("图片的网址");背景图background: url(" 图片的网址 "); 背景.background-color:#色码;背景色彩. 背景 background css 说明 background-image:url("图片的网址"); 背景图 background: url(" 图片的网址 "); 背景 background-

  • css教程:font-size属性

    网页制作poluoluo文章简介:乍一听css字体设置很容易,其实真做起来不然,我们工程师使用全力,他们在不同浏览器调整字体的大小知道的得到合适的结果.实际上有一点深入的理解就能起到很大的作用. CSS的字体样式设置相信许多人再熟悉不过,其实字体样式的设置并不仅仅限于我们平时常用的那几个属性,本文为您详细叙述 font-size 的字体样式设置的详细属性. 乍一听css字体设置很容易,其实真做起来不然,我们工程师使用全力,他们在不同浏览器调整字体的大小知道的得到合适的结果.实际上有一点深入的理解

  • CSS教程:通配属性批量替换的方法

    网页制作poluoluo文章简介:更加渴望CSS3的早日普及,将来直接用input[type="text"]这种玩意来实现. 例如我想美化输入框的效果: <input type="text" name="textfield" /> 避免给这样的通配属性: input{background:#222; border:1px solid #4a4a49; color:#ccc; padding:1px 3px; } 否则所有的输入框.按钮

  • CSS教程:CSS页面布局的技巧

    破洛洛文章简介:对CSS网页布局的技巧,可谓是名目繁多.这里将适合新手的CSS网页布局的小技巧总结出来,或许对您更有实际的参考价值:1.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 对CSS网页布局的技巧,可谓是名目繁多.这里将适合新手的CSS网页布局的小技巧总结出来,或许对您更有实际的参考价值: 1.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 2.同一个的class选择符可以在一个文档中重复出现,而id选择符

  • CSS教程:CSS背景全攻略 CSS教程:CSS背景全攻略

    网页制作poluoluo文章简介:背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachment 等的属性,也会介绍一些有关背景(background)的常用技巧,以及 css3 中的 背景(background)(包含4个新的 原文链接:Backgrounds In CSS: Everything You Need To Know 译文链接:css 背

  • CSS教程:CSS选择器性能 CSS教程:CSS选择器性能

    网页制作poluoluo文章简介:如果你非常在意页面的性能那千万别使用CSS3选择器.实际上,在所有浏览器中,用 class 和 id 来渲染,比那些使用同胞,后代选择器,子选择器(sibling, descendant and child selectors)对页面性能的改善更值得关注. 一些关于CSS选择器性能的讨论引起了我的兴趣. 第一个是Shaun Inman写的<合格的CSS选择器(CSS Qualified Selectors)>,实际上这篇博文并没有提到CSS性能,不过有一个来自

  • CSS教程:CSS变换(transition) CSS教程:CSS变换(transition)

    网页制作poluoluo文章简介:我们需要的是快速而简单的方法来给页面添加简单的变换(transition)效果.在本文中,你会发现很有用的关于CSS变换(transition)以及如何使用它们的信息. 译自:CSS transitions 101 中文:CSS3变换入门 原作者:Jason Cranford Teague 译者:神飞 请尊重版权,转载请注明出处,多谢! 尽管人们期望在屏幕上有些改变,但是CSS和HTML对页面中的交互能做的实在太少了,而那些还需要用代码来实现. 比如一个链接要么

  • CSS教程:CSS id和CSS class区别与用法

    破洛洛文章简介:css中id和class的运用. 简单介绍CSS id与CSS class区别与用法. CSS id知识:在一个网页里ID只能使用一次.当然即使一个id在一个网页内被使用多次,其CSS样式仍然可以实现生效,但是一般规定W3C标准是使用一次.因为ID在html里可以赋予html标签特殊的属性如一下JS动作.表单传值等特性所以区别于一个class可以使用多少的次,而一个CSS 命名的id只能使用一次避免一些特定动作.传的表单值的兼容性特性错误即使没有其它JS脚本动作.表单传值特性但是

  • css教程:css指令,兼容,注释,selector css教程:css指令,兼容,注释,selector

    1.2 跟css有关的标记,指令 1.2.1 link <link rel="stylesheet" type="text/css" href="sheet1.css" media="all" /> link标记的用意是允许将html与其他文档相关联.Css用link将css文档与html文档想关联. Css文档虽然不是html的一部分,但是被html使用,从外部style sheets引入它. Link在head

  • CSS教程:CSS选择符的用法和实例

    网页制作poluoluo文章简介:虽然之前已经有不少对于CSS选择符的文章在网络上出现,不过我还是准备以自己的方式来写一写,这也是一种获得乐趣的途径.所以我小小的总结了一下css1及css2选择符(本文的CSS选择符都为css1及css2)的用法及实例,希望对大家有些许帮助. 成天都要与样式打交道的朋友,相信对CSS选择符(CSS Selectors)都不会陌生.不过对于刚接触或者还不是很熟悉css的朋友来说,能够找到一份对于CSS选择符的相关例子集合,还是会有一定帮助的. 虽然之前已经有不少对

  • CSS教程:CSS制作3D立方体 CSS教程:CSS制作3D立方体

    网页制作poluoluo文章简介:目前制作出来的效果,只有Firefox 3.5,Safari 3.2+,Google Chorme支持.下面来为大家列举出相关演示和代码. 无需JavaScript, imagery, canvas 或者SVG,就可以利用最新的CSS制作出3D立方体,这的确是一件让人难以想象的事情. 目前制作出来的效果,只有Firefox 3.5,Safari 3.2+,Google Chorme支持.下面来为大家列举出相关演示和代码. 3D CSS 结果演示 单个静态3D立方

  • CSS教程:CSS命名参考

    在XHTML中定义ID.CLASSS都用得上,主要是方面CSS定义样式时能一眼看穿.所以,CSS命名仅作参考. (1)页面结构类 容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper (2)导航类 导航:nav 主导航:mainnav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsid

最新文章
  • 撸了一台美国独服 想免费为大家提供几台 vps 不知道有没有人感兴趣?

    如题 :) --cut-- foreverlucas在2016-05-08 04:00:11回答到: 可以的.但是建议注意控制滥用 顺便问下服务器地址? foreverlucas在2016-05-08 04:00:11回答到: 服务器(地理位置)机房什么的 itsme在2016-05-08 04:00:11回答到: 我先报名? 昨天晚上不知道什么情况,电信到美国丢包超过 50%. wsn2009在2016-05-08 04:00:11回答到: 我感兴趣,但是不知道楼主可以坚持多久,顺便求一下您的

  • Hello Bitcoin, goodbye Western Union?

    http://www.rnw.nl/africa/article/hello-bitcoin-goodbye-western-union-future-remittance-could-be-digital --cut-- Tvguy在2013-12-23 14:02:3回答到: WU still the faster way to send money, bit coin is nice, but only for doggy markets

  • 2015全国碘缺乏病宣传日广播稿

    亲爱的老师.同学们: 大家上午好!红领巾广播站现在开始广播,欢迎您的收听!我是播音员**. 5月15日是"全国碘缺乏病宣传日", 也被称作"全国碘缺乏病防治日". 是为了提高国民对"碘缺乏病"危害的认识,促进国民身体健康而设立.1993年9月国务院召开"中国2000年消除碘缺乏病动员会",会议并提出:5月5日为全国碘缺乏病防治日,借以加大力宣传,提高人们对防治碘缺乏病的认识.1994年起每年的5月5日定为全国碘缺乏病宣传日.

  • 美白牙齿的方法妙招 美白牙齿的方法妙招

    美白牙齿的方法妙招 牙齿白亮的人微笑起来都会倍加自信,对于有一口黄牙或者牙齿不漂亮的朋友来说,那无疑是让人十分艳羡的.要想让自己的牙齿漂亮起来,美白牙齿的方法妙招会帮到你许多,此外,牙齿发黄的原因你也不可不知,一起来看看吧. 黄牙就是我们俗话说的牙齿发黄,而造成黄牙的原因一般有三点.分别是: 1.氟斑牙--日常饮水中氟元素浓度过高而造成的氟斑牙,在氟浓度超过百万分之一时,牙胚发生的钙化过程会使牙齿表面发黄,凹凸不平. 2.四环素牙--儿童时期经常服用四环素所致,会产生一种四环素钙的黄色复合物,沉

  • 杨勃:豆瓣社区不运营 用产品来表达和实现 杨勃:豆瓣社区不运营 用产品来表达和实现

    杨勃:豆瓣社区不运营 用产品来表达 网易科技讯由<商业价值>杂志.极客公园等联合举办的"极客公园创新大会暨2011中国互联网创新产品评选颁奖典礼"已于2012年1月7日北京糖果俱乐部落下帷幕. 该活动分为上午场的i应用开放分享环节与下午场的"第二届中国互联网创新产品评选颁奖典礼".上午场中,9个入围产品代表进行讲述,三位嘉宾点评;下午场上,网易新闻客户端等产品获奖(榜单见此前报道),随后豆瓣网CEO杨勃.奇虎360董事长周鸿祎等做了创新主题访谈. 杨勃提

  • 安全证书过期的常见原因和解决方法 安全证书过期的常见原因和解决方法

    安全证书过期的常见原因分析: 如果计算机上的日期或时间设置不正确发生此现象. 解决方案 要解决此问题, 请按照下列步骤: 1. 在 Apple 菜单, 指向 控制面板 , 然后单击 日期和时间 . 2. 验证计算机上日期和时间是否正确. 如果没有, 调整必要日期和时间设置. 3. 重新启动计算机, 并确认日期和时间是否仍然正确. 注意 : 如果计算机上日期和时间都正确, 重新启动计算机后, 可能需要替换计算机电池. 要运行计算机时钟已关闭计算机后要保留计算机 (CMOS) 设置和计算机使用电池.

  • PS鼠绘忧伤的古代武士 PS鼠绘忧伤的古代武士

    来源:PS联盟 作者:梦回眸 人物鼠绘相对来说难度是非常大的.因为鼠绘的不单纯是人物,还有衣着.装饰,背景等.综合起来就有很多东西要画.如果功底好的话可以适当用数位板来画,这样就可以节省很多时间. 作者近期教程:PS鼠绘超酷的白发美男. 最终效果 1.画草图:构思满脑海里全是抑郁情绪,所以·画面比较诡异和压郁感.很多构思来源与生活. 2.大致的上色:我喜欢大体铺色. 3.绘画眼睛. 4.顺着草图用钢笔钩出头发选区,上色填充.头发中间调,既不是高光也不是暗部. 5.淡淡的画出人物脸部明暗. 6.脸

  • 你最爱哪一种色系的婚礼主题? 你最爱哪一种色系的婚礼主题?

    婚礼主题之红色 红色一直是传统中国婚宴的代表色,象征着吉祥以及喜庆.传统的中国红装点出的婚礼亦能演绎出一番别样的情调.骨子里有着传统气质.极富古典神韵或崇尚复古的新娘非常适合打造一场传统的中式婚礼,大红灯笼.红色烛台.丝绸锦缎--这些传统中式婚礼中常用的元素,与现在元素碰撞之后,呈现出新时代的中式婚宴. 婚礼主题之白绿色 白色,是上帝最爱的颜色,代表着神圣和纯洁,温婉甜美的新娘身披长长的白纱,手捧白色的百合与爱侣共赴红毯,此情此景,爱的感动散播在四方.绿色是大自然中最具生机的颜色,明快的色调流露

  • 青春期减肥好吗 青春期减肥好吗

    青春期之后,无论男女,体内脂肪的含量均会有一定程度的增加,其中女性尤为突出,为了让自己的身材不被脂肪左右,继续保持苗条,很多女生在青春期就已经开始了减肥的征途,但是青春期是生长突增的年纪,在青春期减肥好吗? 1.青春期减肥会不会长不高 会.青春期是生长突增的高峰时期,脂肪会有明显的增加,脂肪对于人的身高增长也是起到一定作用的,如果青春期减肥,减少脂肪的摄入量,控制机体脂肪的吸收量,会引起躯体发育迟缓,骨骼生长减慢,有长不高的风险. 2.青春期减肥有什么危害 青春期减肥一般是节食减肥,减少脂肪的摄

  • Win10的Snap功能怎么关闭 Win10的Snap功能怎么关闭

    Win10也继承了Win7/Win8.1的Snap功能,且有了新的升级.只要用户把窗口移动到屏幕角落,就会出现相应的形态和大小改变.自动适应窗口或屏幕大小.但有些用户不习惯这样的功能,有没有办法禁止掉该功能呢? 不过有些用户不太习惯这种功能,有些时候把窗口拖到边缘或角落时,可能会出现上述效果,但他们并不需要.因此,从这些用户的角度来说,停掉该功能是有必要的.方法也并不麻烦,改一个注册表键值就可以做到完全禁用,不必在"设置"中逐个关闭. 方法如下: 1.在Cortana搜索栏或运行中输入

热门推荐
  • 百度影音字幕文件怎么用? 百度影音字幕文件怎么用? 百度影音怎么添加字幕?我们在用百度影音看视频或者电影的时候屏幕没有字幕,或者那个字幕没有匹配,这个时候你可以自己添加一个,有些人想恶搞电影想加入一些古怪的字幕,这样也行,小编给大家介绍下百度影音怎么添加字幕?让大家更好的使用百度影音. 百度影音添加字幕方法 第一步:打开影片,用百度影音打开要观看的影片. 第二步:打开字幕选项:右键单击播放器任何一个部分,会弹出一个菜单栏,然后选择菜单栏里的"字幕"选项. 第三步:手动载入字幕:在右侧弹出的字幕菜单栏里选择"手动载入字幕&quo
  • 什么是处暑三侯 什么是处暑三侯 <诗经>之<周南>云:"五日为一侯,三侯为一气,故一岁有二十四气." 处暑三候为:"一候鹰乃祭鸟;二候天地始肃;三候禾乃登." 老鹰捕食 "一候鹰乃祭鸟"是指此节气中老鹰开始大量捕猎鸟类,并且先陈列如祭而后食. 万物凋零 "二候天地始肃"是指接着天地间万物开始凋零,充满了肃杀之气.古时有"秋决"的说法,即是为了顺应天地的肃杀之气而行刑.<吕氏春秋>上说:"天地始
  • 朴经/丁恩妃《自卑情结》歌词 朴经/丁恩妃《自卑情结》歌词 本站音乐知识配图 자격지심 (自卑情结) - 박경 (朴经)/정은비 (丁恩妃) 词:박경 曲:박경/Score Megatone 编曲:Score Megatone You 도대체 문제가 뭐야 말 좀 해봐 You 질투하는 거야 자격지심인 거야 boy 몇 번이나 말했잖아 나에겐 한 사람밖에 없다고 귀여워 너답지 않은 너가 빠라바빠빠 빠라바빠빠 빠라바빠빠 넌 모를 거야 내 맘을 너 지금 어딜 보는 건지 지나가는 쟤 쳐다봤지 쇼윈도를 보는 척하면서 눈은 왜 그리 돌
  • Photoshop设计华丽质感的五一立体字教程 Photoshop设计华丽质感的五一立体字教程 来源:PS联盟 作者:Sener 多层立体字制作方法跟立体字相似,只是底部的立体部分多了几个层次,相当于把单个的立体面分成几份,分别加上了不同的颜色. 最终效果 1.新建一个100 * 600像素的文档,选择渐变工具,颜色设置为暗青色只黑色渐变,然后由中心向边角拉出图2所示的径向渐变作为背景. <图1> <图2> 2.打开图3所示的文字素材,也可以自己创作,用魔术棒抠出来后拖进来,适当放好位置,锁定图层透明像素后把文字填充白色,效果如图4. <图3> <图4>