目次
ディスカッションへの返信 (解決策)
ホームページ ウェブフロントエンド htmlチュートリアル CSS に詳しい方は、この画像を見るのを手伝ってください。ありがとうございます!_html/css_WEB-ITnose

CSS に詳しい方は、この画像を見るのを手伝ってください。ありがとうございます!_html/css_WEB-ITnose

Jun 24, 2016 pm 12:12 PM


ボタンを作成してナビゲーションメニューに配置しました。ボタンは透明ですが、写真のように赤丸の部分にエラーがあります。

1. この問題は、IE、MATHON、Firefox を含む、私が使用するすべてのブラウザで発生します
2. PS で作成されたボタンには、png 形式と gif 形式の 2 つの形式があり、この問題は両方で発生します
3. 実装されましたスライドドアを使用していますが、CSS の基礎的な知識はあります。CSS の知識は間違っていないと思います

これはバグですか、それとも原因ですか?何か解決策はありますか、ありがとうございます


ディスカッションへの返信 (解決策)

それは写真についてですか?角が取れていませんね

写真に問題があるかどうか見てみましょう?

これは画像の問題です

画像の背景が削除されていないことは間違いありません

大きな角が丸い場合は、左右に 2 枚の画像を使用する必要があります。写真

それは写真の問題ですよね?角が取れてないですよね

写真の問題ではなく、写真は角が丸くなっており、赤丸のエラーもありません

写真がうまく切れていません

の背景写真は削除されていません これは間違いありません

背景は削除されていますが、残っているのは透明な部分です


写真に問題はありません


問題は写真の通りです

アダプティブです!ボタンをクリックして、スタイルを投稿してください

写真は問題ありません
ねえ、写真を 1 つではなく 2 つ使用するように言いました。 写真、左側の写真の幅が小さくなっています。
これは、画像の背景を 2 回使用したために発生します。外側の背景は透明ですが、内側の背景は透明であるため、右側の境界線は不透明です。

画像を使用する場合、外側の背景画像の幅を制御することはできません。

わかりました


優れたナビゲーション バー CSS:

#menu{
background:url(../images/menu.jpg) no-repeat 0 0;
width:1000px
height:40px;
text-align :センター;
パディング左: 15 ピクセル;
#メニュー li{
マージン: 0 50 ピクセル;
テキスト装飾: なし;
垂直整列:中央;
行高さ:40px;
#menu li a:hover{
背景:url(../images/menu_hover.gif)
垂直整列:middle;
余白:-10px;
マージントップ: 5px;
#menu li a:hoverstrong{
背景: url (../images/menu_hover.gif) 右上;
line-height:30px;
margin-top:5px;透明な背景pngをサポートしていません

IE6ではありませんが、これらの問題が発生しており、この状況は複数のブラウザで発生します

#menu li a:hover{background:url(../images/menu_hover.gif) left 0 ; カラー:#fff; 行の高さ:30px; 高さ:30px;

#menu li a:url(../images/menu_hover.gif) 0;padding-right:10px; margin-left:10px; float:left; height:30px}

これは自分で調整できます
#menu li a:hover{background:url(../画像/ menu_hover.gif) 左 0; カラー:#fff; ライン高さ:30px; 高さ:30px; #menu li a:background:url(.. /images /men...

効果はありません。CSS の問題ではないはずです

このようにして直接効果を確認できます

a{background:url(../images/menu_hover.gif) left 0 ; color:#fff; 行の高さ:30px; 浮動小数点:左}

強い{背景:url(../images/menu_hover.gif) 右の 0; :10px; margin-left:10px ; float:left; height:30px}

テスト

{background:url(.. /images/menu_hover.gif) left 0; color:#fff; line-height:30px; float:left}


強い(../images/menu_hover .gif) リグ...

あなたと同じように変更しましたが、効果はありません。 CSS の問題ではありません

以前の写真があり、新しい写真に変更されていませんか?
これが本当に起こっているかどうかは、フォルダー内で確認できます

明らかに画像の長さが異なります

明らかに画像の長さが異なります

これはまだ元の画像であり、新しい問題ではありません この問題はバグですか? ?

先ほど調べたところ、適応的な角丸ボタンの背景画像には背景色が必要であることがわかりました。左隅には背景色がなくても構いませんが、右隅には背景色が必要です。

をクリアしてみてはいかがでしょうか。歴史?以下に投稿した個々の写真は、実際のレンダリングよりもはるかに広いように感じますか?

履歴を消去してみてはいかがでしょうか?以下に投稿した個々の写真は、実際のレンダリングよりもはるかに広いように感じますか?
それは無効です、おい!

皆さん、この問題を解決するのを手伝ってください。そうすればポイントを差し上げます

JavaScript でグローバル変数の値を変更する方法

ボタンをクリックするたびに k の値を 1 ずつ増やしたいのですが、どれくらいですか。グローバル変数の値は変更できないのでしょうか?

はは、CSS の問題ではなく、画像です。拡大すると、ps で切り取るだけでわかります。私がかつて遭遇した問題は、

JavaScript でグローバル変数の値を変更する方法です。

< スクリプト言語="javascript">

関数 explus(){
2;?? グローバルではありませんか?
JavaScript でグローバル変数の値を変更するには?
var k=2; +1;
alert(k );
}

var k=2;??これはグローバルな測定ではありません。私の質問を明確に理解していませんでした。ボタンをクリックするたびに、ポップアップ k の値が 1 ずつ増加します
var k=2。しかし、explus 関数でグローバル変数 k の値に +1 を加えても、グローバル変数 k の値は 2 のままです

それでは、グローバル変数 k の値を変更するにはどうすればよいでしょうか?このとき、グローバル変数 k は変化しません。


2 つの方法
1. 透明な画像を不透明にする
2. 画像を切り取って上下に配置します

(--
------ ---)
このように、背景の位置を変更します

親愛なる友人、この問題を解決するのを手伝ってくれませんか?
JavaScript でグローバル変数の値を変更する方法


親愛なる皆さん、この問題を解決するのを手伝ってくれませんか。ありがとう

JavaScript でグローバル変数の値を変更するには?
var k=2;

k=k+1;

}


私の実験結果は正常です

投稿されたページがない限り、ページが投稿された場​​合、k をバックグラウンドに設定し、js はバックグラウンド メソッドを呼び出して処理し、値を取得しますof k

1. ブラウザのキャッシュ ファイルをクリアします。
2. 画像に背景色が設定されているか、画像の下の要素に背景色が設定されているかを確認します。
3. Gif 形式の写真を使用するのが最善です。

まだ動作しない、ちょっと...

まだ動作しない、ちょっと...
それがあなたの写真の問題です。PS を使用して再度処理してください。

ボタンをクリックしたときの適応幅の背景のずれの問題を探していたところ、偶然この投稿を目にしました...

li: (角の幅) 6px; にpadding-rightを追加します。 -left へのパディング: 上記と同じ幅の値で問題ありません。

これを行う場合、背景画像の幅が十分に広い必要があります。
一般的に、私たちのアプローチは写真を 2 つの行に分割することであり、li の背景はコーナー部分にすぎません。
Aの背景は角+横の部分です。

申し訳ありませんが、コードには何も問題はありません。画像です。
下のレイヤーはボタンを完全に表示し、右側のボタンで直接終了します。
上のレイヤーでは、背景が右側にあり、角が透明になっているため、下の画像が表示されます。
画像を 2 行にすることをお勧めします。最初の行には左隅のみがあり、2 行目には左隅がなく、右側は隅が現れるまで続きます。

下のレイヤーでは、背景画像を左上に配置し、強い背景を右下上に配置します。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

&lt; datalist&gt;の目的は何ですか 要素? &lt; datalist&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML&lt; Datalist&GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

&lt; Progress&gt;の目的は何ですか 要素? &lt; Progress&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML&lt; Progress&gt;について説明します。要素、その目的、スタイリング、および&lt; meter&gt;との違い要素。主な焦点は、&lt; Progress&gt;を使用することです。タスクの完了と&lt; Meter&gt; statiの場合

&lt; meter&gt;の目的は何ですか 要素? &lt; meter&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html&lt; meter&gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化&lt; Meter&gt; &lt; Progress&gt;およびex

&lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? &lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

この記事では、&lt; iframe&gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

この記事では、html5&lt; time&gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

See all articles