把文本放在图片之上的几种方法

日期:2019-11-23编辑作者:明仕ms57Web前端

把文本放在图片之上的几种方法

2015/07/23 · CSS · 图片, 文本

本文由 伯乐在线 - cucr 翻译,黄利民 校稿。未经许可,禁止转载!
英文出处:css-tricks.com。欢迎加入翻译组。

我很喜欢 Erik D. Kennedy 的《打造出色 UI 的 7 个法则(下)》。文中第 4 条规则是这样的:学会在图片上添加文字的方法。我觉得我们应该看一看里面的要点,编写代码实现一下,并关注所有提及的技术上的东西。

第一节 html基础
1.Windows 系统会使用反斜杠而不是斜杠,比如 C:windows 。这没关系,就算你在 Windows 上开发你的网页,你仍应该在你的代码中使用斜杠。

着色

图片需要深色,不能有太多的纵向对比边缘

图片由你来挑选,如果它的颜色不是特别深。你需要用图片编辑程序加深一下,或者使用 CSS 覆盖一层透明色。最整洁的方法或许是使用多层背景,但是做起来并不是轻而易举的。技巧在于使用一个不产生渐变的渐变(不会从一个颜色过渡到另一个颜色,是固定的)

CSS

.darken { background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(shoes.jpg); }

1
2
3
4
5
6
7
8
.darken {
  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(shoes.jpg);
}

虽然黑色覆盖层更为简单和通用,你会发现彩色覆盖层同样有效。

利用这种方法确实可以通过CSS的支持为任何你想着色的图片着色。

2.超文本标记语言(Hypertext Markup Language, HTML)是一个可以用来结构化你的Web内容并给予其含义和目标的编码语言。例如,你的内容可以包括一组段落或一个重点列表,甚至可以含有图片和数据表。这一节将为你提供足够的信息,使你能够对HTML语言加以熟悉。

白色文本

需要白色文本–我敢保证你找不到干净简单的反例,真的,哪怕只有一个。

我发现这确实是真的,至少当你尝试着做到漂亮什么的。垃圾杂志一般会使用黄色。

3.HTML并不是真正的的程序语言,他是一种标记语言 ,用来结构化和含义化你想要放在web网站上的那些内容。

整页图片

有一种情况,不可避免的在一张图片上添加文本,那就是使用背景图片进行了全屏填充。之前我们已经讲过如何做,最佳选择如下:

CSS

body { background: /* do whatever tinting and stuff here */; /* This will ensure everywhere is covered */ background-size: cover; }

1
2
3
4
5
6
body {
  background: /* do whatever tinting and stuff here */;
 
  /* This will ensure everywhere is covered */
  background-size: cover;
}

顺便讲一下,如果你想如上所示那样铺上满屏图片,同时又能滚动向下查看更多,就需要在页面顶部区域设置一个 100vh 单元的高度。

浏览器支持上会有所不同。你或许需要一个固定高度的备份方案,或者通过 JavaScript 实现。

4.段落paragraph元素:(<p>) :元素名称p
  <p>My cat is very grumpy</p>
5.元素可以有Attribute属性,属性(Attribute)包含了关于元素的一些额外的信息,这些信息本身并不需要被显现在内容(Content)中。
--在属性与元素名称或上一个属性(如果有超过一个属性的话)之间的空格符
--属性的名称,并接上一个等号
--由引号所包围的属性值
<p class="editor-note">My cat is very grumpy</p>
6.嵌套元素
<p>My cat is <strong>very</strong> grumpy.</p>
7.空元素
有一些元素并不包含内容,它们被称为空元素。看看我们 HTML 代码中的 <img> 标签:
。。。
图像文件路径的  src (source) 属性,这一元素也要包括 alt (alternative) 属性 —— 这个属性应该是图像的描述内容,当图像不能被某些用户看见时,可以显示出alt内容。
这个元素包含了两个属性,但是这里并没有 </img>的闭合标签,而且没有任何内容。这个因为一个image 标签不包含任何有效的内容,它的作用是向其所在的位置嵌入一个图像。
8.<!DOCTYPE html>— 文档类型说明(doctypes)。在 HTML 刚刚出现的时期里(大约是1991/2 年),文档类型说明是用为链接通过自动拼写检查和其他有用的操作来让 HTML 页面遵守特定规则来表现为好的 HTML。然而,如今没有人真正关注它们,而且它们现在只是作为一种历史上的人工制品来让开发进行顺利。
<html></html> — <html> 元素. 这个元素包含了整个页面的内容,有时也被称作根元素。
<head></head> — <head> 元素. 这个元素包含了所有和你页面相关的信息,但是不会被用户所看到。这里面包括像想被搜索引擎搜索到的关键字和页面描述,CSS样式表和字符编码声明等等。
<body></body> — <body> 元素. 这个元素包含了你想被用户看到的内容,不管是文本,图像,视频,游戏,可播放的音轨或是其他内容。
<meta charset="utf-8"> — 这个元素指定了你的文档需要使用的字符编码,像 UTF-8 ,它包括了非常多人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容。我们没有任何理由不去设定字符编码,而且也可以避免以后可能出现的问题。
<title></title> — 这个元素设置了页面的标题,标题显示在浏览器标签页上,而且在你将网页添加到收藏夹或喜爱中时将作为默认名称。
9.标题
HTML 包括六个级别的标题,<h1>-<h6>
10.列表
无序列表:<ul>
有序列表:<ol>
<ul>
      <li></li>
      <li></li>
</ul>
11.连接
链接非常重要 — 它们让 Web 成为了 WEB(万维网)。要植入一个链接,我们需要使用一个简单的link — <a> — a 是 "anchor" (锚)的缩写。
12.<a>Mozilla Manifesto</a>
<a href="">Mozilla Manifesto</a>--href属性
<a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
网址开始部分省略了 https:// 或者 http:// 协议,你可能会得到错误的结果。

框内文本

这个非常简单,也非常可靠。可以快速制作一个半透明的黑色长方形,然后加上白色文字。如果覆盖层足够不透明,你可以使用任意图片作为底层背景,而文字依旧非常清晰。

适用于任何纵向对比的颜色组合。

只有一行文字的情况下比较简单。但如果文字突破了这个边界,就相对复杂了。可以让标题 display:block,或许不如 inline 这样优雅。但使用 inline,你需要考虑换行周围的间距不会显得突兀。

我们之前讨论了这个。我认为 box-decoration-break 将归结为前进的道路:

CSS

.title { background-color: black; color: #fff; display: inline; padding: 0.5rem; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

1
2
3
4
5
6
7
8
9
.title {
  background-color: black;
  color: #fff;
  display: inline;
  padding: 0.5rem;
 
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

第二节 css基础

模糊

有一种出奇的好方法可以让覆盖层文字更为清晰,那就是将底层图片部分模糊化。

有一种实现方式,让区域中的一部分沿用同样的背景,固定在相同的位置(fixed attachment 是一种方法),然后将其模糊化。

CSS

.module { backgroundnull:url(); background-attachment: fixed; overflow: hidden; } .module > header { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px 10px; background: inherit; background-attachment: fixed; } .module > header::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: inherit; background-attachment: fixed; -webkit-filter: blur(12px); filter: blur(12px); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.module {
  background: url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg);
  background-attachment: fixed;
  overflow: hidden;
}
.module > header {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px 10px;
  background: inherit;
  background-attachment: fixed;
}
.module > header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  background-attachment: fixed;
  -webkit-filter: blur(12px);
  filter: blur(12px);
}

以上是在模糊区域添加了一个彩色条,但并不是必须的。只要模糊化到位,效果一样好:

就像 Erik 调用 scrim 来柔化图像的部分区域。

scrim 是一个摄影设备的部分,使光线柔和。现在也是一个柔化图像的视觉设计技术,通过柔化图像让覆盖文本更清晰。

1.就像 HTML,CSS也不是真正的编程语言。它是样式表语言,也就是说,它允许你有选择性地为 HTML 文档的元素添加样式

Floor Fade(底部褪色)

floor fade是当你有一个图像,碰巧在底部逐渐走向黑色,而在它之上写有白色文本。

这也许是相当明显,因为我们一直使用渐变去着色,但是……

CSS

.module { background: linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) ), url(skyscrapers.jpg); }

1
2
3
4
5
6
7
8
9
.module {
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.6)
    ),
    url(skyscrapers.jpg);
}

如果你组合使用一点文本阴影,你可能会侥幸得到少量的图像暗度

CSS

.title { text-shadow: 0 1px 0 black; }

1
2
3
.title {
text-shadow: 0 1px 0 black;
}

在结尾…

1.找到其他的方法和组合使用这些技术很有趣

2.我相信你会找到这些演示失效的浏览器。也许我们可以在评论中来讨论备用方案。

1 赞 收藏 评论

2.解析css规则
选择符(Selector
HTML 元素放在规则最开始。它选择了一个或多个需要添加样式的元素(在这个例子中就是 p 元素)。要给不同元素添加样式只需要改变选择符就行了。

关于作者:cucr

图片 1

新浪微博:@hop_ping 个人主页 · 我的文章 · 17

图片 2

  • 声明(Declaration
    一个单独的规则比如 color: red; 这指定了你想要添加样式元素的属性。
  • 属性(Properties
    这是你改变 HTML 元素样式的方法。(在这个例子中 color 就是 p 元素的属性。)在 CSS 中,你通过选择合适的属性来改变你的规则。
  • 属性值(Property value)
    在属性的右边,冒号后面,我们拥有属性值,用于从指定的属性里的非常多的外观中选择一个值(我们除了 red 之外还有很多颜色的值可以选择)。
  • 规则里除了选择器的部分都应该包含在成对的大括号里({}).。
  • 在声明里,你应该用冒号分离开属性与属性值。
  • 在规则里,你应该用分号分离开各个声明。
    3.同时修改多个属性,你只需要将它们用分号隔开;选择多种类型的元素然后为它们添加一组样式、记得将不同的选择符用逗号分开。
    Information: Selectors
    html注释符:
    css注释符:/* 和 */之间的内容都是注释
  • 盒模型
    -- 内边距(padding), 围绕着内容的空间(比如围绕段落的空间)
    -- 边框(border), 紧接着内边距的实体线段
    -- 外边距(margin), 围绕元素外部的空间
    width (属于一个元素的)
    background-color, 元素内容和内边距之后的颜色
    color, 元素内容的颜色(通常是文本)
    text-shadow: 为元素内的文本设置阴影
    display: 设置元素的显示模式(暂时不用担心这部分内容)
    body {
    width: 600px;/强制页面永远保持600像素宽。/
    margin: 0 auto;/当你在 margin 或 padding中设置两个值时,第一个值代表元素的上方和下方(在这个例子中设置为 0),而第二个值代表左边和右边(在这里,auto **是一个特殊的值,意思是水平方向上左右对称)。你也可以使用一个,三个或四个值/
    background-color: #FF9500;/指定元素的背景颜色。我们给 body 元素用了一种略微偏红的橘色以与 html 元素形成对比。/
    padding: 0 20px 20px 20px;/ 我们给内边距设置了四个值来让内容四周产生一点空间。这一次我们不设置上方的内边距,设置右边,下方,左边的内边距为20像素。值以上、右、下、左的顺序排列。/
    border: 5px solid black;/ 简单地为页面四周设置了5像素的黑色实线边框。/
    }
  • margin summary
    Syntax:默认值:0 0 0 0(上右下左)
    /* Apply to all four sides /
    margin: 1em;
    /
    vertical | horizontal /
    margin: 5% auto;
    /
    top | horizontal | bottom /
    margin: 1em auto 2em;
    /
    top | right | bottom | left /
    margin: 2px 1em 0 auto;
    /
    Global values */
    margin: inherit;
    margin: initial;

    margin: unset;

    h1 {
    margin: 0;/浏览器会提供了一些 默认样式给<h1>元素,即使你没有提供任何 CSS 代码。
    通过设置 margin: 0覆盖掉默认样式。
    /
    padding: 20px 0;/设置了标题的上内边距和下内边距为20像素,标题文本与 html 的背景颜色一致。/
    color: #00539F; /字体颜色/
    text-shadow: 3px 3px 1px black;/第一个像素值设置了水平方向的阴影值
    第二个像素值设置了垂直方向的阴影值
    第三个像素值设置了阴影模糊的距离(越大的值表示越模糊)
    第四个值设置了阴影的颜色
    /
    }
    height summary
    Syntax:默认值是 auto
    / Keyword value /
    height: auto;
    / <length> values /
    height: 120px;height: 10em;
    / <percentage> value /
    height: 75%;
    / Global values /
    height: inherit;
    height: initial;
    height: unset;
    width属性:设置段落宽度
  • CSS中的元素尺寸分为两类,一类叫做“内部尺寸”,英文写作”Intrinsic Sizing”,尺寸由内部元素决定;还有一类叫做“外部尺寸”,英文写作”Extrinsic Sizing”,宽度由外部元素决定。
    width summary
    -- 所有主流浏览器都支持 width 属性。
    -- 注释:任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
    --Syntax
    /* <length> values /
    width: 300px;
    width: 25em; /
    宽度25个字符
    浏览器默认的文字大小是16px,这样就是1em=16px
    元素自身要是设置了字体大小后1 ÷ 元素的font-size × 需要转换的像素值 = em值/
    /
    <percentage> value /
    width: 75%;
    /
    Keyword values /
    width: 25em border-box;/
    pandding&border被包含在定义的width中/
    width: 75% content-box;/
    pandding&border不被包含在定义的width中/
    width:fill-available;/
    自动填满剩余的空间。/
    width理解
    CSS3 width:fill-available下的垂直水平居中demo
    width: max-content;/
    假设我们的容器有足够的宽度,足够的空间,此时,所占据的宽度是就是max-content所表示的尺寸。
    好像可以超出父容器空间一样,表现得好像设置了white-space:nowrap(不换行)一样*/
  • display:inline-block和width:max-content对比demo
    width: min-content;/表示的并不是内部那个宽度小就是那个宽度,而是,采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。/
  • display:inline-block和width:min-content对比demo
    width: available;
    width: fit-content;/“shrink-to-fit”表现,换句话说,和CSS2.1中的float, absolute, inline-block的尺寸收缩表现是一样的。
    就拿水平居中效果举例,首先浮动肯定不行,因为只有左浮动和右浮动;绝对定位压根不占据空间,普通流中根本无法应用,
    而inline-block需要父级使用text-align:center,而本身可能还需要text-align:left略烦。
    /
    CSS3 width:fit-content使用与margin auto下水平居中demo
    width: auto;/自适应;
    inherit是继承父类的属性,一般用于字体、颜色、背景等
    auto是按情况自适应,一般用于高度、宽度、外边距和内边距等关于长度的属性:如{ margin:0 auto}
    /
    /* Global values /
    width: inherit;
    width: initial;/
    除了 Internet Explorer,其他的主流浏览器都支持 initial 关键字。Opera 15 之前的版本不支持 initial 关键字。/
    width: unset;/
    一个属性定义了unset值,如果该属性是默认继承属性,该值等同于inherit,如果该属性是非继承属性,该值等同于initial*/
  • 居中显示图像
    display summary
    img {
    display: block; /*body 元素是块级元素,意味着它占据了页面的空间并且能够赋予外边距和其他改变间距的值。与之对应的是行内元素,则不能。所以为了使图像有外边距,我们必须使用 display: block将其改成块级元素。/
    margin: 0 auto;/
    我们可以重新使用 margin: 0 auto 一次*/
    }
    CSS display 属性
    -- 所有主流浏览器都支持 display 属性。
    -- 注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。
    -- 定义&用法:display 属性规定元素应该生成的框的类型。
    none 此元素不会被显示。
    block 此元素将显示为块级元素,此元素前后会带有换行符。
    inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
    inline-block 行内块元素。(CSS2.1 新增的值)
    list-item 此元素会作为列表显示。
    run-in 此元素会根据上下文作为块级元素或内联元素显示。
    compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
    marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
    table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
    inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
    table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
    table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
    table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
    table-row 此元素会作为一个表格行显示(类似 <tr>)。
    table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
    table-column 此元素会作为一个单元格列显示(类似 <col>)
    table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
    table-caption 此元素会作为一个表格标题显示(类似 <caption>)
    inherit 规定应该从父元素继承 display 属性的值。
  • 使用 <div> 会自动换行使用、 <span> 就会保持同行。span> 在CSS定义中属于一个行内元素,在行内定义一个区域,也就是一行内可以被 <span> 划分成好几个区域,从而实现某种特定效果。
  • visibility summary
  • CSS visibility 属性
    定义和用法:
    visibility 属性规定元素是否可见。
    -- 提示:即使不可见的元素也会占据页面上的空间。请使用 "display"

    属性来创建不占据页面空间的不可见元素。

    说明:这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间,不过可以完全不可见。
    值 collapse 在表中用于从表布局中删除列或行。
    Syntax:visibility默认值是visible,继承:yes
    /* Keyword values /
    visibility: visible;
    visibility: hidden;/
    页面上显示空白,但是仍然占据空间/
    visibility: collapse;/
    值 collapse 在表中用于从表布局中删除列或行。/
    /
    Global values /
    visibility: inherit;
    visibility: initial;
    visibility: unset;/
    一个属性定义了unset值,如果该属性是默认继承属性,该值等同于inherit,
    如果该属性是非继承属性,该值等同于initial/
    padding summary
    Syntax:padding默认值是 0,继承:no
    /
    Apply to all four sides /
    padding: 1em;
    /
    vertical | horizontal /
    padding: 5% 10%;
    /
    top | horizontal | bottom /
    padding: 1em 2em 2em;
    /
    top | right | bottom | left /
    padding: 2px 1em 0 1em;
    /
    Global values */
    padding: inherit;
    padding: initial;

    padding: unset;

    / <length> values /
    padding-top/padding-right/padding-bottom/padding-left: 0.5em;
    padding-top: 0;
    padding-top: 2cm;
    / <percentage> value /
    padding-top: 10%;
    / Global values /
    padding-top: inherit;
    padding-top: initial;
    padding-top: unset;
    overflow summary
    CSS overflow 属性
    Syntax:overflow默认值是visible,继承:no
    / Content is not clipped /
    overflow: visible;/默认值。内容不会被修剪,会呈现在元素框之外。/
    / Content is clipped, with no scrollbars /
    overflow: hidden;/内容会被修剪,并且其余内容是不可见的。/
    / Content is clipped, with scrollbars /
    overflow: scroll;/内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。/
    / Let the browser decide /
    overflow: auto;/如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。/
    / Global values /
    overflow: inherit;/规定应该从父元素继承 overflow 属性的值。/
    overflow: initial;
    overflow: unset;/一个属性定义了unset值,如果该属性是默认继承属性,该值等同于inherit,
    如果该属性是非继承属性,该值等同于initial
    /
    overflow-x 是否对内容的左/右边缘进行裁剪。
    overflow-y 是否对内容的上/下边缘进行裁剪。
    overflow-x/overflow-y
    min-width summary
    CSS min-width 属性
    Syntax:
    / <length> value /
    min-width/min-height: 3.5em;
    / <percentage> value /
    min-width: 10%;
    / Keyword values
    /min-width: max-content;
    min-width: min-content;
    min-width: fit-content;
    min-width: fill-available;
    /* Global values /
    min-width: inherit;
    min-width: initial;
    min-width: unset;
    CSS position 属性
    定义和用法: position 属性规定元素的定位类型。
    Syntax: 默认值是 static
    /
    Keyword values /
    position: static;/
    默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。/
    position: relative;/
    生成相对定位的元素,相对于其正常位置进行定位。
    因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。/
    position: absolute;/
    生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。/
    position: fixed;/
    生成绝对定位的元素,相对于浏览器窗口进行定位。
    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。/
    position: sticky;
    /
    Global values /
    position: inherit;/
    规定应该从父元素继承 position 属性的值。/
    position: initial;
    position: unset;/
    一个属性定义了unset值,如果该属性是默认继承属性,该值等同于inherit;
    如果该属性是非继承属性,该值等同于initial/
    inherit&unset 实例
    box-decoration-break summary
    .clone {
    -webkit-box-decoration-break: clone;
    -ms-box-decoration-break: clone;/
    ??? /
    -o-box-decoration-break: clone;/
    ??? /
    box-decoration-break: clone;
    }
    Syntax:
    box-decoration-break: slice; /
    默认值*/
    box-decoration-break: clone;
    box-decoration-break: initial;
    box-decoration-break: inherit;
    box-decoration-break: unset;
  • border-radius:100px (表示块元素是圆形的)
    background: linear-gradient() 线性渐变属性
  • 这里是一个线性渐变从中间(水平方向)和顶部(垂直方向)开始,起始于蓝色,过渡到白色.
    /* 旧语法,带前缀并且已经废弃,以支持老版本的浏览器 /
    background: -prefix-linear-zgradient(top, blue, white);
    /
    新语法,不带前缀,以支持标准兼容的浏览器(Opera 12.1, IE 10, Firefox 16, Chrome 26, Safari 6.1) */
    background: linear-gradient(to bottom, blue, white);
  • 改变相同的渐变从左到右运行:
    /* 旧语法,带前缀并且已经废弃,以支持老版本的浏览器 /
    background: -prefix-linear-gradient(left, blue, white);
    /
    新语法,不带前缀,以支持标准兼容的浏览器(Opera 12.1, IE 10, Firefox 16, Chrome 26, Safari 6.1) */
    background: linear-gradient(to right, blue, white);
  • 对角线式的运行:你可以同时指定水平方向和垂直方向的起始点使渐变对角线式的运行
    /* 旧语法,带前缀并且已经废弃,以支持老版本的浏览器 /
    background: -prefix-linear-gradient(left top, blue, white);
    /
    新语法,不带前缀,以支持标准兼容的浏览器(Opera 12.1, IE 10, Firefox 16, Chrome 26, Safari 6.1) */
    background: linear-gradient(to bottom right, blue, white);
  • 使用角度渐变:渐变朝右有个70度(degree)的角。总之,0deg 创建一个从底部到顶部的垂直渐变,当变成90deg时生成一个从左到右的水平渐变。
    background: linear-gradient(70deg, black, white);
  • 色标:这个例子指定三个色标
    /* 旧语法,带前缀并且已经废弃,以支持老版本的浏览器 /
    background: -prefix-linear-gradient(top, blue, white 80%, orange);
    /
    新语法,不带前缀,以支持标准兼容的浏览器(Opera 12.1, IE 10, Firefox 16, Chrome 26, Safari 6.1) */
    background: linear-gradient(to bottom, blue, white 80%, orange);
    background: linear-gradient(180deg, blue, white 80%, orange);
  • 等间距色标:需要注意的是没有指定位置时这些色标自动地均匀的隔开。
    /* 旧语法,带前缀并且已经废弃,以支持老版本的浏览器 /
    background: -prefix-linear-gradient(left, red, orange, yellow, green, blue);
    /
    新语法,不带前缀,以支持标准兼容的浏览器(Opera 12.1, IE 10, Firefox 16, Chrome 26, Safari 6.1) */
    background: linear-gradient(to right, red, orange, yellow, green, blue);
    background: linear-gradient(90deg, red, orange, yellow, green, blue);
  • 透明和渐变:渐变是支持透明度的。 举个例子,当你叠加多个背景层,你可以使用这个在背景图片上来创建淡入淡出的效果 :
    /* 旧语法,带前缀并且已经废弃,以支持老版本的浏览器 /
    background: -prefix-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
    /
    新语法,不带前缀,以支持标准兼容的浏览器(Opera 12.1, IE 10, Firefox 16, Chrome 26, Safari 6.1) */
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
  • CSS3 RGBA
    text-shadow : 0 2px 1px rgba(255,0,0,0.3);
    background/color: rgba(0, 0, 0,0.5);
    color: rgb(0, 0, 0);
    R:红色值。正整数 | 百分数
    G:绿色值。正整数 | 百分数
    B:蓝色值。正整数| 百分数
    A:透明度。取值0~1之间
  • 径向渐变:默认来说,结束形状是一个椭圆形并且和容器的大小比例保持一致。
    色标:等间距色标:
    background: radial-gradient(red, yellow, rgb(30, 144, 255));
  • 大小:这是径向渐变和线性渐变其中的一个不同之处。 你可以用一个尺寸值来指定定义圆形或者椭圆形的大小的点
    椭圆(ellipse)的最近端:这个椭圆使用最近端的值, 这就意味着从开始点(中心点)到封闭盒子的最近端的距离来指定椭圆的尺寸。
    background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
    椭圆(ellipse)的最远端: 这个例子和之前的例子相似,除了它的大小指定为farthest-corner,渐变的尺寸为起始点到封闭盒模型最远端的起始点的距离。
    background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);
    圆形(circle)的最近端:这个例子使用closest-side来指定开始点(中心)和最近端的距离为圆的尺寸。
    background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
  • 重复的渐变:linear-gradient 和 radial-gradient不支持自动重复的色标。然而, repeating-linear-gradient 和 repeating-radial-gradient 可以实现这个功能。
    background: repeating-linear-gradient(-45deg, red, red 5px, white

    5px, white 10px);

    background-color: #000;
    background-image: repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
  • 重复的径向渐变:这个例子使用 repeating-radial-gradient 创建渐变
    background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  • box-shadow:inset 8px 8px 10px 0px deeppink, inset -5px -5px 5px 0px blue, inset 5px 5px 15px 0px yellow;
    CSS3 box-shadow 属性
    h-shadow:必需。水平阴影的位置。允许负值。
    v-shadow:必需。垂直阴影的位置。允许负值。
    blur:可选。模糊距离。值越大,越模糊
    spread:可选。阴影的尺寸。
    color:可选。阴影的颜色。请参阅 CSS 颜色值。
    inset:可选。将外部阴影 (outset) 改为内部阴影。默认外部阴影
  • text-shadow: 3px 3px 1px black;/第一个像素值设置了水平方向的阴影值;第二个像素值设置了垂直方向的阴影值; 第三个像素值设置了阴影模糊的距离(越大的值表示越模糊); 第四个值设置了阴影的颜色/
    CSS3 text-shadow 属性
    h-shadow:必需。水平阴影的位置。允许负值。
    v-shadow:必需。垂直阴影的位置。允许负值。
    blur:可选。模糊的距离。
    color:可选。阴影的颜色
    CSS3 box-sizing 属性
    .box{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox /
    -webkit-box-sizing:border-box; /
    Safari /
    width:50%;
    border:1em solid red;
    float:left;
    }
    content-box:/
    这是由 CSS2.1 规定的宽度高度行为。
    宽度和高度分别应用到元素的内容框。
    在宽度和高度之外绘制元素的内边距和边框。/
    border-box:/
    为元素设定的宽度和高度决定了元素的边框盒。
    就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
    通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。/
    inherit:/
    规定应从父元素继承 box-sizing 属性的值。*/
    第三节 JavaScript基础

本文由明仕ms577发布于明仕ms57Web前端,转载请注明出处:把文本放在图片之上的几种方法

关键词:

然后做的更好

CSS: 试试,然后做的更好 2015/08/28 · CSS ·CSS 本文由 伯乐在线 -赖信涛翻译,JustinWu校稿。未经许可,禁止转载! 英文...

详细>>

如何成为一名卓越的前端工程师

哪些成为一名牌产品优品越的前端技术员 2015/08/19 · JavaScript· 6 评论 ·前面一个程序猿,职场 原稿出处: PhilipWalton ...

详细>>

js的一些笔试面试题,前端参考指南

前端参考指南 2015/05/09 · CSS,HTML5,JavaScript ·前端 本文由 伯乐在线 -cucr翻译,周进林校稿。未经许可,禁止转载! 英文...

详细>>

中的层叠上下文初探

CSS3 中的层叠上下文初探 2015/10/09 · CSS ·层叠上下文 原文出处: HaoyCn    前言:关于层叠上下文,笔者还没有去阅读...

详细>>