問題タブ [background-image]

Cocoa のテキスト フィールドの背景として画像を使用することは可能ですか? もしそうなら、どのように？

ロゴ div の背景画像を変更する mootools onclick イベントの後に、ie6 で .png 背景画像をレンダリングしようとしています。

これが今の関連コードです-

これは、何らかの理由で機能していないようです。イベントが呼び出され、他のすべてのブラウザーで正常に動作しますが、ie6 で実行するとロゴが空白になります。

誰かがこれに光を当てることができるか、何かアイデアを持っているなら、私は大いに感謝しています.

乾杯、ピーター

Some users are reporting that my site is too slow And i think background images in css might be a possible culprit

I have a site that uses a custom build system to concatenate all css, compress them ( yui compressor ) , make css sprites automatically ( smartsprites ) and I end up with a 9kb CSS for the whole page, this includes all css for background-images at last is d they were around 60 ( several go to the same sprite not sure how many )

I was wondering if the default behavior of browsers is to download the images as needed ( when they match a selector ) or download them all.

Right now firebug in firefox seems to suggest that they are all been downloaded. What techniques would you suggest i'd use to avoid the problem, and or mitigate it.

edit: I misread firebug, the images that are being downloaded belong to a lightview that is hidden but the background-images are matched to the dom.

背景に大きな画像を使用する Web ページがあります。ダウンロードしたら、jQueryを使用して画像をロードすることを望んでいました（基本的に、bing.comが背景画像をロードする方法）。これはjQueryで可能ですか？もしそうなら、お勧めのプラグインはありますか？

私は助けが必要です 。firefoxまたはOperaで問題なく動作します。問題はつまりです。スタイルファイルまたはインラインスタイルに入れようとしましたが、効果がありません。

背景画像を指定すると、何らかの理由で、最新のブラウザーのほとんどは、デフォルトの入力枠スタイルをテキスト ボックスに適用しなくなります。代わりに、醜い挿入スタイルが得られます。私が知る限り、デフォルトのブラウザー スタイルを適用する CSS の方法もありません。

IE 8 にはこの問題はありません。Chrome 2 と Firefox 3.5 はそうですし、他のブラウザも同様だと思います。私がオンラインで読んだことから、IE 7には同じ問題がありますが、その投稿には解決策がありませんでした.

次に例を示します。

Chrome 2 では次のようになります。

Firefox 3.5 の場合: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc

更新: JS 解決策:純粋な CSS-on-the-input ソリューションを見つけたいと思っていますが、今のところ使用する回避策を次に示します。これは私のアプリから直接貼り付けられているため、上記のようなスタンドアロンの良い例ではないことに注意してください。大規模な Web アプリから関連する部分を含めました。あなたはその考えを得ることができるはずです。HTML は「リンク」クラスの入力です。背景の縦位置が大きいのはスプライトだからです。IE6、IE7、IE8、FF2、FF3.5、Opera 9.6、Opera 10、Chrome 2、Safari 4 でテスト済み。一部のブラウザでは、背景の位置を数ピクセル微調整する必要があります。

JS:

CSS:

更新: CSS Close Enough Solution: kRON からの提案に基づいて、Vista で入力を FF と IE に一致させる CSS を次に示します。これは、純粋なデフォルトをあきらめて 1 つのスタイルを強制する場合に適しています。私は彼を少し変更し、「青みがかった」効果を追加しました。

CSS:

UIButtonTypeCustom で UIButton を作成してみました。その後、次の方法を使用して外観を調整しました

ただし、問題は、UIImages を状態に設定し始めると、setTitle が機能しなくなることです。setTitle は非 UIButtonTypeCustom でのみ機能すると思いますか? これは、テキストを画像自体に入れる (あまり堅牢ではない) か、これをサブクラス化してビューに UILabel を追加する必要があることを意味しますか? 大変な作業のようですね :( 何かアイデアはありますか?

Y軸で繰り返される背景画像を含む「main_menu」divがあります。この div の上に、ヘッダーに使用される別の div があります。問題は、ヘッダー div に高さ約 75px の画像があることです。main_div の background-image が実際に始まる場所から約 50 ピクセル高い main_div のテキストを開始したいと思います。

私は次のようなことを考えていました：

これは本当にうまくいきません。問題は、背景画像を通常の場所に保ちながら、テキストを上に移動する方法です。

ありがとう

{編集}

ここにCSSがあります

これはhtmlです

ご覧のとおり、ヘッダーはかなり高くなっています。menu_main div のテキストを 50px ほど上から始めたいと思います

私はgreasemonkeyのユーザースクリプトのソースを調べていて、cssで次のことに気づきました。

私は、greasemonkeyスクリプトが、サーバー上でホストするのではなく、ソース内で可能なものをすべてバンドルしたいと考えていることを理解できます。これは十分に明白です。しかし、私は以前にこのテクニックを見たことがなかったので、その使用を検討しました。それはいくつかの理由で魅力的だと思われます。

1. ページ読み込み時のHTTPリクエストの量を減らし、パフォーマンスを向上させます
2. CDNがない場合は、画像と一緒に送信されるCookieによって生成されるトラフィックの量が減少します
3. CSSファイルをキャッシュできます
4. CSSファイルはGZIPPEDにすることができます

IE6（たとえば）が背景画像のキャッシュに問題があることを考えると、これは最悪の考えではないようです...

それで、これは良い習慣ですか、悪い習慣ですか、なぜそれを使用しないのですか、そして画像をbase64エンコードするためにどのツールを使用しますか？

更新-テストの結果

• 画像を使用したテスト：http：//fragged.org/dev/map-shot.jpg-133.6Kb

• テストURL： http: //fragged.org/dev/base64.html

• 専用CSSファイル： http： //fragged.org/dev/base64.css-178.1Kb

• GZIPエンコーディングサーバー側

• クライアントに送信された結果のサイズ（YSLOWコンポーネントテスト）：59.3Kb

• クライアントブラウザに送信されたデータの保存：74.3Kb

いいですが、小さい画像には少し役に立たないと思います。

更新：PageSpeedに取り組んでいるGoogleのソフトウェアエンジニアであるBryan McQuadeは、ChromeDevSummit 2013で、CSSのdata：urisは、講演中に重要/最小限のCSSを配信するためのレンダリングブロックアンチパターンと見なされると述べました#perfmatters: Instant mobile web apps。http://developer.chrome.com/devsum​​mit /sessionsを参照し、それを覚えておいてください-実際のスライド