1

最初の質問に挑戦します。

これは問題です。私は数回経験しましたが、正確にはわかりません。解決方法は次のとおりです。

グラデーションの背景色としても使用される半透明の背景画像 (透明な丸みを帯びたコーナーなど) があります。(この例では、ドロップダウン ナビゲーションのボタンです。ボタンにカーソルを合わせると、nav-list が表示されます。)

コードは次のとおりです。

    <div id="top-navi"><a id="top-navi-button" href="#" >Navigation</a>
     <ul>
      <li><a href='#'>bla</a></li>
      <li><a href='#'>blubb</a></li>
     </ul>
    </div>

CSS:

#top-navi {
    position: fixed;
    top: 0px;
    left: 6%;
    z-index: 1000;
}

#top-navi a#top-navi-button {
    float: left;
    width: 130px;
    height: 20px;
    padding: 5px 10px 5px 20px;
    background: url(../img/top-navi-button.png) no-repeat;
    color: #FFF;
    font-size: 120%;
    text-decoration: none;
}
#top-navi a#top-navi-button:hover, 
#top-navi a#top-navi-button:focus {
    text-decoration: underline;
}

ボタンのテキストは白です。サイトをアクセシブルにしたいので、画像にテキストを入れず、(スクリーンリーダーが読めるように) html で書き、白くスタイルします。ここまではかなりうまくいきます。

画像が非アクティブ化されている場合でも、すべての機能を使用できるように、さらにアクセスしやすくしたいと考えています。これを行うと (たとえば、FF 開発者ツールバーを使用して)、背景画像が消え、白いテキストが表示されなくなります。

ここで、(画像に加えて) リンクに背景色を指定すると、透明なコーナーに重なります。また、テキストを a に入れて<span>背景色を付けようとしましたが、画像にグラデーションがあるため、スパンの背景色が表示されます。

それを解決する方法はありますか？事前にどうもありがとうございました！

クリス

4

1 に答える 1

1

画像の不透明なグラデーション部分には、追加の画像が必要です。spanリンクにを追加すると、スパンのスタイルを設定して、背景が単色でフォールバックカラーになるようにすることができます。

+------------------------------------------------+
| a: Gradient and shadow                         |
| +---------------------------------------------+|
| | a > span: Solid gradient + background color ||
| +---------------------------------------------+|
+------------------------------------------------+

したがって、HTML：

<a id="top-navi-button" href="#"><span>Navigation</span></a>

そしてCSSは次のようなものです：

a#top-navi-button {
  background: url(top-navi-button.png) no-repeat;
}

a#top-navi-button span {
  background: url(top-navi-solid_gradient.png) #00F;
}

アクセス可能なサイトを作成する場合は、キーボードナビゲーションの提供も検討する必要があることに注意してください。現在、Tabキーを使用してメニュー項目を選択することはできません。

于 2012-09-04T16:52:36.407 に答える