タグ付けされた質問 「background-image」

background-image CSSプロパティは、要素の1つ以上の背景画像を設定します。


30
IMGとCSSの背景画像を使用する場合
この質問の答えはコミュニティの努力です。この投稿を改善するには、既存の回答を編集してください。現在、新しい回答や相互作用を受け入れていません。 IMGCSS background-imageとは逆に、HTML タグを使用して画像を表示する方が適切な状況はどれですか。 要因には、アクセシビリティ、ブラウザサポート、動的コンテンツ、またはあらゆる種類の技術的な制限や使いやすさの原則が含まれます。

12
背景画像のデータをBase64としてCSSに埋め込むことは良い習慣ですか、それとも悪い習慣ですか?
私はgreasemonkeyのユーザースクリプトのソースを見ていたところ、CSSに次のことがわかりました。 .even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom} greasemonkeyスクリプトは、サーバー上でホストするのではなく、ソース内で可能なすべてのものをバンドルすることを望んでいることを理解できます。しかし、このテクニックを以前に見たことがなかったので、その使用を検討しましたが、いくつかの理由で魅力的であると思われます。 ページ読み込み時のHTTPリクエストの量を減らし、パフォーマンスを向上させます CDNがない場合は、画像とともに送信されるCookieによって生成されるトラフィックの量が減少します CSSファイルをキャッシュできます 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 いいですが、小さい画像にはあまり役に立たないと思います。 更新:Googleのソフトウェアエンジニア、ブライアンマクエードは、PageSpeedに取り組んでおり、ChromeDevSummit 2013で、CSSのdata:urisは、講演中にクリティカル/最小限のCSSを提供するためのレンダリングブロッキングアンチパターンと見なされると述べました#perfmatters: Instant mobile web apps。http://developer.chrome.com/devsum​​mit/sessionsを参照してください。実際のスライド

17
CSSフィルターを背景画像に適用する方法
検索ページの背景画像として使用しているJPEGファイルがあり、Backbone.jsコンテキスト内で作業しているため、CSSを使用して設定しています。 background-image: url("whatever.jpg"); CSS 3のぼかしフィルターを背景にのみ適用したいのですが、その1つの要素だけにスタイルを設定する方法がわかりません。私が試した場合: -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); background-imageCSSのすぐ下で、背景だけでなくページ全体のスタイルを設定します。画像だけを選択してそれにフィルターを適用する方法はありますか?または、ページの他のすべての要素のぼかしをオフにする方法はありますか?

4
背景画像をdivに合わせる
次のdivに背景画像がありますが、画像が途切れます。 <div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center"> 背景画像を切り取らずに表示する方法はありますか?

19
CSSでサイズ変更およびトリミングされた画像を表示する
サイズ比が異なっていても、特定の幅と高さのURLから画像を表示したい。したがって、サイズを変更し(比率を維持)、画像を希望のサイズにカットします。 私はhtml imgプロパティでサイズを変更でき、でカットできbackground-imageます。 どうすれば両方できますか? 例: この画像: サイズが800x600ピクセルで、200x100ピクセルのイメージのように表示したい img私は画像のサイズを変更することができます200x150px: <img style="width: 200px; height: 150px;" src="http://i.stack.imgur.com/wPh0S.jpg"> それは私にこれを与えます: <img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg"> コードスニペットを実行する結果を非表示スニペットを展開 とbackground-image私は画像の200x100ピクセルをカットすることができます。 <div style="background-image: url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;"> </div> くれます: <div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;"> </div> コードスニペットを実行する結果を非表示スニペットを展開 どうすれば両方できますか? 画像のサイズを変更して、必要なサイズにカットしますか?

8
CSSを使用して複数の背景画像を使用できますか?
2つの背景画像を使用することは可能ですか?たとえば、1つの画像を上部で繰り返して(repeat-x)、別の画像をページ全体で繰り返し(繰り返し)、ページ全体で1つの画像を上部で繰り返す画像の後ろに配置したいとします。 htmlとbodyの背景を設定することで、2つの背景画像に望ましい効果が得られることがわかりました。 html { background: url(images/bg.png); } body { background: url(images/bgtop.png) repeat-x; } これは「良い」CSSですか?より良い方法はありますか?また、3つ以上の背景画像が必要な場合はどうなりますか?

14
背景画像の上に半透明のカラーレイヤーがありますか?
DIVがあり、パターンを背景として使用したいと思います。このパターンは灰色です。もう少し素敵にするために、薄い透明色の「レイヤー」を重ねます。以下は私が試したものですが、うまくいきませんでした。背景画像の上に色付きのレイヤーを配置する方法はありますか? ここに私のCSSがあります: background: url('../img/bg/diagonalnoise.png'); background-color: rgba(248, 247, 216, 0.7);

19
レスポンシブCSSの背景画像
私はウェブサイト(g-floors.eu)を持っていて、背景(cssではコンテンツのbg-imageを定義しました)も反応させたいです。残念ながら、私が考えることができる1つのことを除いて、これを行う方法についてはまったくわかりませんが、これはかなりの回避策です。複数の画像を作成し、CSS画面サイズを使用して画像を変更しますが、これを実現するためのより実用的な方法があるかどうか知りたいです。 基本的に私が達成したいのは、画像(ウォーターマーク 'G'付き)が自動的にサイズ変更され、表示される画像が少なくなることです。もちろん可能なら リンク:g-floors.eu これまでに持っているコード(コンテンツ部分) #content { background-image: url('../images/bg.png'); background-repeat: no-repeat; position: relative; width: 85%; height: 610px; margin-left: auto; margin-right: auto; }

10
CSS:背景色の背景画像
このパネルが選択されている(クリックされている)場合、青色に着色したパネルがあります。さらに、.pngそのパネルに小さな記号(画像)を追加します。これは、選択したパネルが以前にすでに選択されていることを示しています。 したがって、たとえば10個のパネルが表示され、そのうちの4個がこの小さな兆候を持っている場合、ユーザーは以前にそれらのパネルをクリックしたことがあることがわかります。これはこれまでのところうまくいきます。問題は、小さな看板を表示すると同時にパネルを青色にすることができないことです。 CSSでパネルを青にbackground: #6DB3F2;、背景画像をに設定しましたbackground-image: url('images/checked.png')。ただし、背景色が画像の上にあるため、標識が見えないようです。 したがってz-index、背景色と背景画像にes を設定することは可能ですか?


5
コンテナの背景画像を回転させる方法は?
Chromeのスクロールバーのボタンに配置された画像を回転させたい。今、私はこのコンテンツを持つCSSを持っています: ::-webkit-scrollbar-button:vertical:decrement { background-image:url(images/arrowup.png) ; -webkit-transform:rotate(120deg); -moz-transform:rotate(120deg); background-repeat:no-repeat; background-position:center; background-color:#ECEEEF; border-color:#999; } コンテンツを回転させずに画像を回転させたい。

6
HTMLテーブルからボーダーを完全に削除する方法
私の目標は、「フォトフレーム」に似たHTMLページを作成することです。つまり、4枚の写真で囲まれた白紙のページを作りたいです。 これは私のコードです: <table> <tr> <td class="bTop" colspan="3"> </td> </tr> <tr> <td class="bLeft"> </td> <td class="middle"> </td> <td class="bRight"> </td> </tr> <tr> <td class="bBottom" colspan="3"> </td> </tr> </table> また、CSSクラスは次のとおりです。 .bTop { width: 960px; height: 111px; background-image: url('../Images/BackTop.jpg'); } .bLeft { width: 212px; height: 280px; background-image: url('../Images/BackLeft.jpg'); } .middle { width: 536px; …

13
CSS3背景画像の遷移
CSSトランジションを使用して「フェードインフェードアウト」効果を作成しようとしています。しかし、私はこれを背景画像で機能させることができません... CSS: .title a { display: block; width: 340px; height: 338px; color: black; background: transparent; /* TRANSITION */ -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; } .title a:hover { background: transparent; background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat; /* TRANSITION */ -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background …

10
背景画像を拡大してdivを満たす方法
背景画像を別のdivに設定したいのですが、私の問題は次のとおりです。 画像サイズは固定(60px)です。 さまざまなdivのサイズ divの背景全体を埋めるように背景画像を拡大するにはどうすればよいですか? #div2{ background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png); height:180px; width:200px; border: 1px solid red; } ここでコードを確認してください。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.