编辑维基文本/图片/平铺图像

其他页面 快速课程 容器中的图像	天竺葵： '天竺葵'；300x225 像素	粉红色非洲菊： 300x225 像素
平铺图像 一字排开 我 mages 可以在不使用图像容器的情况下轻松排成一行，大多数人将这种排成一行的概念与浮动图像联系起来；也就是说，如果添加了太多这样的图像，最后一个图像只会浮动到另一个页面位置，而不是固定在它被放置的位置。最简单的图像排列方法取决于将图像选项限制为最小值。仅指定图像名称及其大小，并忽略所有其他选项，否则该方法可能会变得很麻烦。图像语法可以全部写在一行中，也可以写成连续的多行，并且示例代码已包含在相邻图像排列的“下拉框”中。 请注意，显示的示例没有标题，因为标题只能用于框架或缩略图格式。但是，通过使用诸如Noframeleft之类的模板来对这些图像进行排列，可以获得带有标题的平铺图像。已经制作了一套这些模板来包含所有图像位置。 通过在图像定义之间插入单个空格字符，在相邻图像之间创建了一个细小的分隔空间。要将图像边缘对边缘设置，没有任何空格，只需省略空格字符即可。因为我们很少希望从页面的左页边距开始图像排列，所以使用填充图像非常有用。实际上，一个透明的空白图像已经上传到图像集合中，用于此目的；它被称为Padding.gif，它可以像其他任何图像一样在页面上进行大小调整。请参阅代码注释以了解其用法的示例。（另一种方法，能够实现精确定位，将在下一节中介绍）。 图像很少是您喜欢的尺寸，尤其是在将图像并排设置时。有一种方法可以使图像标准化。考虑图像排列。由于这些图像在最初形状上存在很大差异，并且难以找到其精确尺寸，因此决定将它们的高度设置为相同，并允许宽度相应地缩放。如以下代码框所示，执行此操作的方法是精确指定重要尺寸（在本例中为高度），同时大幅夸大宽度等不重要尺寸的大小。请注意，某些宽度尺寸是必需的，但其确切值不需要知道。软件将使用更小且更实用的可能性，忽略隐含的较大缩放比例。这样，就可以无需根据宽度和高度进行计算，就可以对形状差异很大的图像进行缩放。 按“一字排开”代码 代码清单摘录 [[Image:Padding.gif|50px]] [[Image:Nymphaea tetragona.jpg|500x226px]] [[Image:Chamomile@original size.jpg|500x226px]] [[Image:Krokus-kih.jpg|500x226px]] or: [[Image:Padding.gif|50px]][[Image:Nymphaea tetragona.jpg|500x226px]] [[Image:Chamomile@original size.jpg|500x226px]] [[Image:Krokus-kih.jpg|500x226px]] 代码说明 在沙盒中使用这两个列表中的任何一个来产生一个直线 三张图像的排列。它们周围没有任何框架。 事实上，它们必须只使用文件名和大小才能使这种方法 工作。 对于第二个列表（全部写在一行中），一个空间可以 在图像定义之间留下空白以产生空白。如果 错过空格，那么边缘将相交。 可以使用其他图像平铺一个白色空白图像，以产生 页面间距，并且这里已经使用它来设置第一个图像的距离 从页边距 50 像素。一个更好的方法，也是稍微 更复杂的方法，是使用HTML 行内样式放置图像， 使用称为相对定位的定位属性。 有些人使用表格来解决图像间距问题，表格 过去一直很有用，因为它们提供了丰富的格式选项。 如果图像被放置在表格单元格中，并且边框被 消失，然后可以使用未使用的单元格宽度来隐式调整 图像之间的间距。标题也可以放在 每个图像下方的单元格中。 其他方法也存在；例如，图像库。示例 这些其他方法将在以下部分中显示。 相对定位 M ost 图像定位仅限于三个预设位置。这些位置分别是左、右和中心。但是，借助一些行内 HTML，图像、表格、文本段落和其他结构可以放置在页面的任何位置。特别是，这意味着可以将图像放置在相对于其他代码预期位置的相对位置。为了进一步解释，如果图像的通常位置在左页边距，根据使用的语法，然后添加相对定位代码允许它相对于该点进行移动，向上或向下，向右或向左，甚至超过页边距。垂直和水平移动的像素值指定了位移的确切程度。 除了复杂性之外，此方法的主要问题在于它不会为放置位置提供换行文本。就像居中图像一样，文本仅限于后置。另一个问题涉及图像的框架；因为移位应用于它们直接容器内的图像，所以必须避免所有类型的边框。由于失去框架和缩略图边框，所有标题都必须通过其他方式进行排列。 为了扩展文本必须后置的问题，也许有必要注意到相对定位事件的顺序。当图像、框或其他结构首次放置时，它会被分配到没有相对定位的空间；也就是说，就像移位代码丢失或设置为零一样。然后，代码通过移位代码给出的数量将项目移到其新位置。在第一个位置留出与移动的项目大小相同的空间。当下一行文本或其他项目被添加到工作中时，它必须考虑那个分配的空间。结果是，当大型图像或文本块被垂直移动时，以下文本不能位于之后该间隙之前。 尽管理论上可以移动表格和大型文本块，但上述限制使其用途较小。当移位和文本相当小的时候，相对定位效果最好。该方法满足了跨页面平铺图像和叠加效果的移位需求。 下面给出了叠加图像的示例。这些图像的正常位置（没有移位）是在一行中，从左页边距开始，并且在这个例子中省略了填充图像。通过所需的量从这些平铺位置移动图像来创建叠加效果。 图像的亮度或密度可以改变。20% 透明度的代码可以在下拉框中找到，其中还包含移位文本的示例。 按“相对定位”代码 从三张图像代码清单中摘录 <span style="position:relative;left:100px;top:0px">[[Image:Nymphaea tetragona.jpg|500x226px]]</span> <span style="position:relative;left:50px;top:-20px">[[Image:Chamomile@original size.jpg|500x226px]]</span> <span style="position:relative;left:0px;top:-40px">[[Image:Krokus-kih.jpg|500x226px]]</span> 从文本叠加代码清单中摘录 <span style="opacity:0.2;filter:alpha(opacity=20)">[[image:gerbera_pink.jpg|center|340px]]</span> <span style="font-family:lucida handwriting;line-height:1.5em;color:maroon;font-size:16pt;position:relative;left:300px;top:-225px">'''''This is the text.'''''</span> 代码说明 将此代码部分粘贴到您的编辑窗口或沙盒中以重现叠加图像布局。这些图像行通常将显示为平铺内联，从左页边距开始，因为它们没有使用填充图像。 标记代码的left 和top 属性修改了正常位置。在第一行图像中，left=100 像素和top=0 像素表示图像的左侧将被放置在比其预期位置更远的 100 像素处；它通常位于左页边距处，因此它将位于距离它 100 像素的右侧。 图像的顶部不会被移动。第二张图像的左侧，它通常位于第一张图像的右侧，只需要从其通常位置向后移动 50 像素即可产生效果。第二张图像也被向上移动了 20 像素。相对于其通常位置，第三张图像根本没有沿任何方向移动，但向上移动了 40 像素。 相对定位中的重要一点是注意它们是指定的定位变化；从基于其他代码可以合理地预期图像占据的位置的变化。放置在页面左侧的图像最容易计算新位置。 也可以使用right 属性，表示图像的右侧，以及bottom 属性，表示图像的下边缘。它们的使用遵循与上面类似的推理。任何重叠都是由图像代码的写入顺序决定的；最后放置的图像将在顶部，第一个图像在底部。可以通过以下方式更改堆叠顺序 进一步编码。 如果图像被放置在框架中，定位可能会变得混乱或完全失败。在表格单元格或框等框架内进行定位是可能的，但移位将在图像容器内进行。 这是文本。 鼠标悬停图像 非洲菊：将鼠标移动到图像上。 两个图像可以占据相同空间，前提是它们中只有一个图像在同一时间可见。通常的方法是将鼠标悬停在默认图像上，即始终可见的图像。这样做时，备用图像会替换它，当鼠标移开时，原始图像会重新出现。 此技术可使用模板 HoverImage 实现。模板中提供了两个图像的名称以及其他图像选项，并可以创建两个独立的标题。此方法最适合形状相同的图像，即纵横比相同的图像。然后，使用一个基本尺寸设置，两个图像都将被缩放至相同的尺寸。当形状不同且图像发生变化时，呈现作品的高度或宽度也会发生变化。由于文本会调整以环绕图像进行换行，因此效果不一定是糟糕的，你可以通过在沙盒中尝试来亲身体验。正如本页其他地方所建议的，存在一种方法可以修复图像的高度而不是宽度，这可能更适合某些人。 在所有其他方面，模板的使用方式与单个图像相同，例如，文本换行适用于左侧和右侧定位的图像。模板可以在任何需要完整图像语法的场合使用，例如，它不能用于构建图库条目，因为这些条目仅使用简化的图像语法，即图像名称。它可以在页面上、表格和下拉框内以及任何可以利用完整图像语法的地方使用。 右侧图像显示了模板使用示例；更多详细说明可以在页面 Templates Ready to Use 和模板页面本身找到。 其他图片页面 快速课程 容器中的图像 另请参阅 Wikibooks:Sandbox: 用户尝试代码的 Wikibooks 编辑沙盒。 Help:Editing: 如何编辑页面 Help:Files: 使用文件 Help:Tables: 关于表格的帮助 Web Colors: 网页颜色 Wikipedia Commons: 维基百科共享媒体资源库 CSS2 Properties Reference: 一个优秀的外部 CSS 参考 Template:Dropimage: 一个用于图像、图库或文本的 Wikibooks 下拉框，具有许多格式选项。 Template:Hidden: 另一个 Wikibooks 下拉框 Description of the Gallery tag: 关于图库语法的说明