2

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

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

4

1 回答 1

2

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

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

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

所以你会onerror=altr()在你的所有img元素中使用函数定义

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元素中指定的尺寸，则需要添加代码，将这些尺寸放入此处创建的元素的style属性中。span

jsfiddle

于 2013-10-03T08:09:33.653 回答