2

alt画像の属性があります。画像が利用できない場合、画像があるべき場所の 45 倍の角度でテキストを斜めに表示したいと思います。CSSでtransform/rotateプロパティを使ってみたのですが、これも表示画像が傾いてしまいます。

代替テキストのみを傾ける方法はありますか?

4

1 に答える 1

2

altテキストは CSS の概念として存在しないため、CSS でこれを行う方法はありません。要素には CSS が適用され、altテキストは疑似要素であっても要素を構成しません。imgCSS には、ルールの適用を要素のステータスに依存させる方法はありません。実際には、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それらの寸法を入れるコードを追加する必要があります。stylespan

jsfiddle

于 2013-10-03T08:09:33.653 に答える