Question

我的图片属性alt。当图像不可用时，我希望文本对角显示在图像所在位置的45°角。我已经尝试在CSS中使用transform / rotate属性，但这也会显示图像。

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

Answer 1

在CSS中无法做到这一点，因为alt文本不作为CSS概念存在。 CSS应用于元素，alt文本不构成元素，甚至是伪元素。 CSS中没有办法使规则的应用取决于img元素的状态。实际上，alt文本的呈现，以及在图像不可用时整体呈现img元素，因浏览器而异。

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

使用脚本编制的解决方法是用img文本替换alt元素，这些文本包含在可以旋转的元素中。坏消息是您需要在标记中的每个onerror元素中添加img属性。你不能用脚本来做这件事，因为在元素已被解析时添加属性为时已晚，因为在解析时，浏览器也会发送图像请求。而且你不能使用complete元素的img属性，因为当对图像的请求失败时它被设置为true - 在JavaScript中没有直接的方法来测试{是{ {1}}元素是否呈现为图像。

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

img

并使用CSS代码

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);
}

如果您希望在包含特定维度的框中显示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元素中指定的尺寸，则需要添加将这些尺寸放入{{{ 1}}此处创建的img元素的属性。

jsfiddle

旋转图像Alt文本而不旋转图像

1 个答案: