Question

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

我已经创建了CSS布局并希望制作网站的文本版本，但是如何在不使文本重叠图像的情况下实现这一目标？我希望用户仍然可以看到网站的文本版本，以防他们在浏览器上禁用图片。

HTML CODE：

<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图像替换（http://css-tricks.com/css-image-replacement/）在HTML中的屏幕时间显示文本和图像（文本不可见）。

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

接下来，只需使用JS应用正确的样式来检测用户是否已阻止图像：）

如何隐藏图像背后的文字

3 个答案: