如何将文本隐藏在图像后面

Question

我已经准备好我的网页模板(在Photoshop中制作)，并设置为上传到服务器；但是，如果用户隐藏/禁用图像，网站将为空，因为所有的文本都在图像上。

我已经创建了CSS布局，并希望使网站的文本版本，但我如何实现这一点，而没有文字重叠的图像？？我希望用户仍然可以看到一个文本版本的网站，以防他们禁用他们的浏览器上的图像。

HTML代码：

<div id="main_divs_container">
    <div id="left_div"><img src="images/left_div.jpg" width="249" height="622" alt=""></div>
    <div id="index_middle_div"><img src="images/index_middle_div.jpg" width="488" height="622" alt=""></div>
    <div id="right_div"><img src="images/right_div.jpg" width="253" height="622" alt=""></div>
</div>

Answer 1

将文本放入alt=标签中。

当图片被阻塞时，它应该显示文本。

(这几乎就是alt标签的用途，当图片无法访问时，它会以某种方式表示内容)

但是，当它包含大量文本时，即使它呈现出来，也不会很美观。

最好的选择是使用图像(不带文本)作为背景，并通过HTML在其上面添加文本。

Answer 2

你必须创建一个html版本的网站。在photoshop中，我们创建模板仅供参考或客户审查(仅用于视觉目的)。这不是最终的输出。

Answer 3

您可以使用CSS Image Replacement (http://css-tricks.com/css-image-replacement/)在超文本标记语言中同时显示文本和图像(文本不可见)。

然后，你必须编写CSS样式，一个将显示图像并隐藏文本，第二个将执行oposit。

接下来，只需使用JS应用正确的样式来检测用户是否有被屏蔽的图片:)