1

現在、私のメニューはdivをリンクとして使用しています。言うまでもなく、これは良い習慣ではありません。現在、リンクタグを使用するように変更していますが、問題が発生しました。

リンクが「アクティブ」である場合、たとえばそのページを表示している場合、背景画像が適用されます。この背景画像は右中央に配置され、divより1ピクセル離れているため、divの境界と重なっています。divのcssは次のとおりです。

background-image: url('triangle.png');
background-position: center right;
background-repeat: no-repeat;
margin-right:-1px;
z-index:100;
position:relative;

現在、このメソッドをリンクタグに適用することは機能していないようです。画像を1ピクセル右に移動しましたが、z-indexを設定しても、画像は境界線の下にあります。リンクのCSSは次のとおりです。

background:url('triangle.png') no-repeat center right -1px;
z-index:100;
position:relative;

どうしてこれがうまくいかないのかについての考えはありますか？私も試してみましmargin-right:-1px;たが、これは何も変わりません。

たとえば、背景のcssに-5pxを設定すると、境界線からはみ出すはずの残りの画像がはみ出さず、消えてしまうことに気づきました。

編集：これがjsfiddleです：http：//jsfiddle.net/UkYmJ/画像 は透明ではなく白なので、境界線は三角形の内側で「なくなった」はずです。

4

3 に答える 3

1

私の知る限り、「...中道右派"AND"-1px;」のようなものはありません。背景のプロパティに。「右」または数値のいずれかを使用します。100％を超えるパーセンテージ値を使用することでうまくいく可能性がありますが、それが正確でない場合もあり、問題を解決できないと思います。

を使用していて、背景のあるアンカータグを使用していて、この背景を右側の境界線と重ねたい場合は、この境界線を親コンテナ上に配置する必要があり、アンカータグ（背景ではなく）を-1pxシフトします。右側（右：-1px;「a」タグでp​​osition：absoluteを使用している場合は、position：relative;親で）。

編集：あなたのフィドルでこのcssを使用すると、それは私のために働きます：

#menu{
    width:149px;
    border:1px solid red;
}
#menu a{
    display:block;
    padding:10px;
    width:109px;
    text-decoration:none;
    font-family:Comic Sans MS;
    font-size:large;
    color:black;
}
#menu a:hover, #menu a.active{
    color:#99182c;
}
#menu a.active{
    background:url('http://i48.tinypic.com/1p7yg9.png') center right no-repeat;
    position: relative;
    right: -21px;
}

少し面倒なので、それでも改善しようとします...

于 2013-01-05T00:15:08.403 に答える
1
  • background: someColor url(something) no-repeat center right -1px;それは有効な構文ではないと思います。background: someColor url(something) center right no-repeat;は。
  • なぜ使用する必要がありますz-indexか？
  • リンクをブロックとして表示し、1行に表示してみてくださいa {display: inline-block}

編集：使用できますcalc(100%-1px)が、これはIE9 + Saf6 +でのみサポートされ、Operaではサポートされません：http：//caniuse.com/#search=calc （一部のブラウザーではベンダープレフィックスが必要です）。
プレーンCSS2.1でやりたいことを達成できますが;）

于 2013-01-05T00:18:03.837 に答える
0

私はあなたの質問をきちんと読んだと思います。

ここでの問題は、背景が宣言されている要素の端でクリップされることだと思います。A要素の境界を超えてシフトすることはありません。

A：activeにパディングを追加して、少し余裕を持たせることができます。

新しいCSSは次のようになります。

A:active{
background:url(24d2535.jpeg); no-repeat center right -1px;
z-index:100;
padding-right: 5px;
position:relative;
}

それがあなたのために働くかどうか私に知らせてください。

于 2013-01-05T00:29:20.440 に答える