旋转图像替代文本而不旋转图像答案

【问题标题】：Rotate Image Alt Text Without Rotating Image旋转图像替代文本而不旋转图像
【发布时间】：2014-07-31 04:58:26
【问题描述】：

我的图片有alt 属性。当图像不可用时，我希望文本以图像应有的 45* 角对角线显示。我试过在 CSS 中使用 transform / rotate 属性，但这也会倾斜显示的图像。

有没有办法只倾斜替代文本？

【问题讨论】：

您如何检查图像不可用？
好的，我试图做出一个聪明的回答，但无法使用具有不错浏览器的机器。我认为这应该可以使用onerror event。如果您覆盖它，您可以隐藏图像并在替换文本之后插入一个跨度并旋转它。

标签： html css

【解决方案1】：

在 CSS 中没有办法做到这一点，因为 alt 文本不作为 CSS 概念存在。 CSS应用于元素，alt文本不构成元素，甚至不构成伪元素。 CSS 中没有办法使规则的应用依赖于img 元素的状态。而在实践中，alt 文本的渲染，以及在图像不可用时作为一个整体的img 元素的渲染，因浏览器而异。

即使您无条件地旋转元素（这意味着在显示图像时图像也会旋转），alt 文本也不会在所有浏览器中按预期运行。（Firefox 会旋转图像，但不会旋转 alt 文本。）

使用脚本的解决方法是将 img 元素替换为 alt 文本，并包裹在可以旋转的元素中。坏消息是您需要在标记中的每个 img 元素中添加一个 onerror 属性。您不能使用脚本来执行此操作，因为当元素已被解析时添加属性为时已晚，因为在解析时，浏览器也会发送对图像的请求。而且您不能使用img 元素的complete 属性，因为当对图像的请求失败时，它会设置为true——JavaScript 中没有直接的方法来测试img 元素是否呈现为图片与否。

因此，您可以在所有 img 元素中使用 onerror=altr() 以及函数定义

function altr(el) {
console.log(el.innerHTML);
  var span = document.createElement('span');
  span.className = 'notLoaded';
  span.innerHTML = el.alt || 'Missing alt';
  el.parentNode.replaceChild(span, el);
}

并使用 CSS 代码

span.notLoaded {
    display: inline-block;
    border: solid thin;
    color:red;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);        
}

如果您希望在具有某些特定尺寸的框中显示 alt 文本，例如在 img 元素中指定的那些，您需要添加将这些尺寸放入span 元素在这里创建。

jsfiddle

【讨论】：

当图像不可用时，有没有办法旋转图像，但不旋转 alt？