CSS怎么把图片定位叠加,如何在图像上的自由位置叠加字符

如何使用HTML + CSS在图像上的自由位置叠加字符

我想在招牌图像上叠加字母

你有没有想过在图像上显示字符和输入表格等？例如，如果要显示符合图像的招牌部分的字符，如图所示。即使您想在图像上显示字符，也不必精细地划分一个图像并将其发布或使用表格元素。使用CSS(样式表)，您可以逐个像素地微调显示位置，并且可以轻松地在图像上叠加字符。这一次，我们将向您展示如何在网页上发布的图像上叠加任意对象，如字符和输入表单。这是一种仅适用HTML + CSS的简单方法。

在图像上覆盖字符和对象的示例

如果您使用此次介绍的方法，您可以进行如下所示的叠加显示。这里，作为示例，我在图像上叠加一个句子，在图像上叠加选择表格，并在图像顶部覆盖带有框架的字幕。■示例1：叠加字母以适合招牌图像

★今天的日程安排或★ 如何，这里写的字符不是文字而是文字。因此可以选择字母范围。修复也很容易，因为它只是重写HTML。

在上图中，字母叠加在角色的招牌图像上。招牌图像内侧的字母是文本(字符串)，而不是图像。您可以使用鼠标等选择范围并复制它，它也会成为搜索目标。与处理图像和绘制字符的方法不同，即使您想要修改文本，也很容易修改HTML源代码中编写的文本。■示例2：在海背景上叠加输入表单

在上面，下拉菜单叠加在海洋照片的右上角。它不仅仅是叠加在图像上的字符。任何可以用HTML发布的内容，包括这样的输入表单，都可以覆盖任何内容。■示例3：通过叠加字母表示“名称标签”，使其仅占图像的一半

羽田汉娜达

在上图中，我们躺在图像底部中央写有“Haneda架空HANEDA”的柜子上。写在这个Kakomi里面的字母是文字，而不是图像。您可以通过鼠标选择字符部分的范围来轻松理解。在这里，通过在Kakomi的周围添加白色模糊，我使名称标签很容易看到。这种模糊也可以用样式表来实现。像上面张贴的三个样本一样，很容易在图像上显示各种元素，如字符和输入形式。实现这些目标的唯一方法是编写几行CSS源代码。

要在图像上叠加字符，请使用CSS移动显示位置

作为三个样品的被张贴前一页上，重叠的物体，如在图像到自由位置的顶部文本和输入表格，从原来的显示位置偏移很容易与如何编写的CSS(样式表) 。

使用样式表，移动要重叠的元素的排列(显示位置)。

原来的地方应该“图像下字符被显示”如该图的左侧的上方，通过移动字符的显示位置时，显示像就在上面的“图像图中的字符重叠我想做。

在CSS position属性中，仅在HTML的情况下从显示位置移位

使用CSS的position属性，可以将目标元素与其原始显示位置分开，并将其移动到空闲位置。因此，如果将“包含元素的元素”的显示位置移动到“包含图像的元素”，则可以显示覆盖在图像上的字符。我们将简要解释如何在发布源之前使用此位置属性，该源在开始时引入三个样本(具有叠加在图像上的字符的具体示例)。如果仅查看可以复制和粘贴的源，则跳过以下注释并转到第3页。■ CSS的position属性，指定如何移动显示位置

使用position属性指定如何移动显示位置。

可以为移动显示位置的位置属性指定以下四种类型的值。如果指定了静态以外的值，则显示位置将以某种方式移动。

static：标准显示(=不交错)relative：从原始位置移动指定距离absolute：从父框的末尾移动指定的距离(*)修复：固定在距离绘图区域(窗口)末端指定距离的位置(即使滚动屏幕也不会移动)※不限于直接父箱。细节将在后面描述。

■ 指定要移动的距离(位置)的各种属性

例如，如果要指定“右上角”的距离，请使用top属性和right属性。

要指定距原始显示位置的移动距离并指定绝对显示坐标，请结合使用以下四个属性中的两个。

指定距上边缘顶部属性的距离底部属性指定距底边的距离指定左边缘，左边属性的距离用于指定距右边缘的距离的正确属性例如，如果要指定距右上角的距离，请使用top属性和right属性。

相对和绝对用于在图像上的自由位置重叠字符

要在图像上叠加字符，请使用“relative”或“absolute”作为CSS position属性的值。指定这些值时的显示效果如下。■ CSS移动到相对位置“position：relative”如果为position属性指定值“relative” ，则显示可以相对于原始显示位置移动指定距离。

位置：相对;上：5px;左：5px;

根据原始显示位置移动

当如上指定时，目标元素显示在从“原始显示位置”移动“距离顶部约5像素并且从左端参考左上角5像素”的距离处。如图所示，您还可以在句子中移动特定字母。

■ 转移到的绝对位置的CSS：“位置绝对”当位置属性指定的值“绝对”，父盒(※)的端部的基础上，可以显示给一个指定的距离的位置移动。

位置：绝对;上：5px;左：5px;

根据父框的边缘移动。※应该在文本中的“移位”字母与原始显示位置分开，并重新排列到相对于父框左上角的绝对位置。两个“移位”字母在同一个地方重叠。

如上所述，相对于包含目标元素的父框(*)的边缘，它将显示在“从父框顶部5像素，从左端5像素”。在原本应该最初显示的空间中没有显示任何内容，并且以填充方式显示以下元素。※基准(父盒)的绝对位置而很容易只标出“父盒”是过去的一个评论，成为绝对构型“父盒”的基准是，精确地说，为“定位属性的非静态指定值的祖先元素。“ 如果存在满足此条件的元素，那么这是绝对放置标准。如果多个祖先元素与条件匹配，例如“父框的父框”，则最接近的祖先元素是基础。如果两个元素都不对应于条件，则绘图区域(窗口)的边缘用作参考。

最后，我们介绍了HTML + CSS源代码，它实现了一开始介绍的三个样本“覆盖图像上的字母和对象”。

如何在招牌图像上显示字母

首先，我将向您展示如何在下面的招牌图像内部叠加字母。

这是一个在招牌内显示的句子。

要如上所述在图像上叠加字符，请按如下方式描述HTML和CSS。这里，为了便于理解应用哪种样式和哪种样式，通过在HTML的每个元素中使用style属性直接描述CSS源。

这是一个在招牌内显示的句子。 span> p>

上述来源中描述的每个CSS的含义和作用如下。■ position：relative;(第1行：外部p元素)要将p元素作为父框，请为position属性指定值“relative”。“相对”最初是“移动相对”的值，但由于它没有指定移动距离，因此它根本不会从其原始显示位置移动。这里，它仅用于使其成为决定内部span元素放置的标准框(实际显示在图像顶部的字符串)。没有这种描述，“绘图区域(窗口等)的边缘”成为标准。■ position：absolute;(第3行：span元素)在此span元素中，描述要覆盖在图像上的字符串。由于为position属性指定了值“absolute”，因此它将从“引用框的结尾”移动到绝对位置。“参考框”在这里表示“外部p元素”，指定“位置：相对;”。■ top：15px; left：150px;(第3行：span元素)在这种情况下，我们指定显示“从顶部开始15个像素·从左边开始150个像素”。作为移动标准(原点)的位置是指定“position：relative;”的父框(= p元素)的结尾。有必要根据图像微调重叠位置，但如果您以1像素为单位调整值并尝试几次，它将完美适合。■ width：150px;(第3行：span元素)在此示例中，我们将显示字符的水平宽度限制为150像素。这是为了匹配图像中绘制的“招牌”的宽度(框架宽度)。如果没有此指定，字符将跳出图像并继续向右移动直到窗口的末尾(或父框的末尾)。

如何使用图片作为背景覆盖输入表单

接下来，我将向您展示如何在图像上叠加输入表单。

要如上所述在图像上叠加输入表单，请按如下方式描述HTML和CSS。

All About option> IT·Internet频道 option> 创建主页 option> select> form> div> div>

上述来源的含义和作用与第一个例子几乎相同。我没有特别解释，但我只会简单地写一下。■ 位置：相对;：(1行的div元素的外部)确定(与要显示叠加在图像上输入表格)的div元素的内侧的位置到基准框已被描述。■ position：absolute;(第3行：inner div元素)从“参考框的末尾”移动到绝对位置的规格。■ 顶部：30PX;左：100像素;：(3号线的div元素的内部)在这种情况下，已指定在显示出“从30个像素，左侧的100个像素的位置，从顶部”。成为移动标准(原点)的位置是指定“position：relative;”的父框(=外部div元素)的结尾。在这里，我们规定“从顶部的距离”(上)和“从左侧边缘的距离”(左)，如果你想对图像的右上角，和(上)“从顶部的距离”重叠“的最右边指定距(右)的距离也很好。■ 备注：在上面的显示示例中，即使您操作下拉菜单也没有任何反应。如果，如果你想移动到另一个页面取决于下拉式菜单的设定值，文章“ 非常简短的JavaScript做的一个下拉菜单是在使用介绍和方法”。

如何通过仅重叠图像中的一半字符来表达“名称标签”

最后，我将向您展示如何附加名称标签，使其仅与图像的一半重叠。

羽田汉娜达

要如上所述在图像上叠加字符(帧)，请按如下方式描述HTML和CSS。

的 羽田汉娜达 span> p>

上述来源中描述的每个CSS的含义和作用如下。■ 位置：相对;(第1行：外部p元素)它被描述为一个标准框，用于确定内部跨度元素的排列。 ■ position：absolute;(第3行：内部span元素) 从“参考框的末尾”移动到绝对位置的规格。 ■ 顶部：183Px;左：80Px;：(3 号线的跨度元件的内部)在这种情况下，已指定在“从左上方的183像素的80个像素位置”来显示。 ■ 边框：1px的蓝色固体;背景色：#FFFFCC;(第3行：跨度元件的内侧) 这是围绕字母“羽田天空羽田”的框架的装饰。线的厚度为1像素，线的颜色为蓝色(蓝色)，画一条边界线类型为实线(固体)，它是浅黄色的背景颜色(#FFFFCC)。 ■ box-shadow：2px -2px 3px白色，-2px -2px 3px白色;(第3行：内跨元素)这是一种在框架顶部添加白色模糊的装饰。箱阴影属性是添加阴影框，该值的一个属性(如果上正如果较低/负)，“横向距离(如果阳性，如果右/减左)，垂直距离，模糊宽度，阴影颜色“按此顺序。您可以使用逗号“，”一次指定多个阴影。

如何在图像上的自由位置叠加字符

这一次，我展示了如何使用样式表在图像上的自由位置上叠加字符和其他对象。轻松覆盖图像上的各种对象，而无需花时间直接处理图像。请利用它并尝试实现各种设计。

举报/反馈