来自 前端知识 2019-12-07 15:32 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

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

把文件放在图片之上的两种情势

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

本文由 伯乐在线 - cucr 翻译,黄利民 校稿。未经许可,禁止转发!
匈牙利(Magyarország卡塔尔(قطر‎语出处:css-tricks.com。应接到场翻译组。

自己很中意 Erik D. Kennedy 的《成立非凡 UI 的 7 个法规(下)》。文中第 4 条准则是那样的:学会在图片上添Gavin字的不二秘诀。作者认为大家相应看大器晚成看里面的中央思想,编写代码达成一下,并关怀全部提起的技巧上的东西。

第一节 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卡塔尔(英语:State of Qatar)是叁个足以用来结构化你的Web内容并付与其含义和目的的编码语言。比如,你的内容能够蕴涵意气风发组段落或二个根本列表,以至足以分包图片和数据表。那焕发青新岁将为你提供丰硕的新闻,使您可以预知对HTML语言加以熟习。

驼色文本

内需深铁锈红文本–我敢保险你找不到根本简单的反例,真的,哪怕唯有三个。

本人发觉那诚然是真正,起码当你品味着姣好优良什么的。垃圾杂志平时会接受梅红。

3.HTML并非真正的的程序语言,他是后生可畏种标识语言 ,用来结构化和含义化你想要放在web网址上的那多少个内容。

整页图片

有后生可畏种景况,不可制止的在一张图纸上添Gavin本,那便是行使背景图片举办了全屏填充。在此之前大家曾经讲过什么做,最棒选拔如下:

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:// 协议,你可能会得到错误的结果。

本文由金沙澳门官网网址发布于前端知识,转载请注明出处:把文本放在图片之上的几种方法

关键词: