2

境界線の不透明度、背景画像の不透明度の実行方法は知っていますが、背景画像の不透明度をオンにして、境界線の不透明度のない要素が必要です。画像エディターで画像を変更したくないので、CSS で設定された不透明度を探しています。可能？

以下の CSS では、 「無効」ステータスをシャープな不透明境界線で変更したいと考えています。ご意見をお聞かせください...

使用例：このフィドル

ボタンのスタイル:

  div.button, div.button:hover
  {
    background: none;
    border: 2px solid #6C7B8B;
    border-radius: 8px;
    clear: none;
    color: transparent;
    cursor: pointer;
    display: inline-block;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    float: none;
    height: 24px;
    margin-bottom: 0px;
    margin-left: 3px;
    margin-right: 0px;
    margin-top: 7px;
    opacity: 1;
    -moz-opacity: 1;
    outline: none;
    overflow: hidden;
    padding: none;
    vertical-align: top;
    width: 24px;
  }

クリック効果:

  div.button:active
  {
    left: 1px;
    position: relative;
    top: 1px;
  }

ステータス DISABLED の追加スタイル:

  div.disabled, div.disabled:hover
  {
    cursor: default;
    filter: alpha(opacity=50);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    opacity: 0.50;
    -moz-opacity: 0.50;
  }

  div.disabled:active
  {
    left: 0px;
    position: relative;
    top: 0px;
  }

ステータス ON の追加スタイル:

  div.on, div.on:hover
  {
    border: 2px solid #007FFF;
  }
4

2 に答える 2

2

あなたはCSS と同じ状況にいます: 不透明度で背景画像を設定しますか? - 透明な背景を持ちたいが、透明でないコンテンツ (境界線が重要な人) が必要です。

したがって、CSS3にはそのようなものは何もbackground-image-opacityないため、透明な画像を作成するか、2つの要素を互いに重ねて配置することしかできません。下部には画像が含まれています(そこの回答で示唆されているように)。

しかし、あなたの場合、画像をシェーディングするだけで十分です。これは、たとえば、最初から透明な画像を使用して行うことができますが、下敷きを変更しbackground-colorます。または、使用します

<div class="button" title="Zoom!"><img src="icon.gif" alt="glasses" /></div>

と

div.button.disabled img { opacity: .5; }

これは意味的にも意味があります。これらのインライン スタイルから離れるべきです。

（更新されたフィドル）

于 2012-07-12T00:10:35.357 に答える
1

ボタンの上に配置された半透明の疑似要素を介して背景画像を暗くすることはできますが、境界線はできません。

ここに画像の説明を入力

  div.button {
    ...
    position: relative;
  }

  div.disabled:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    background: rgba(255,255,255,0.7);
    border-radius: 6px;
  }

挑戦が好きだからといってこれを提案することに注意してください.Bergiの答えはそれを行う「正しい方法」だと思います.

http://jsfiddle.net/NECyg/

于 2012-07-12T00:20:31.063 に答える