[解決済み] CSS background-image - 正しい使い方は?
2022-04-28 06:42:19
質問
CSSのbackground-imageプロパティの正しい使い方を教えてください。 私が理解しようとしている重要な事柄は
-
引用符で囲む必要があるのでしょうか?
background-image: url('images/slides/background.jpg');
- 相対パス(上記のように)でよいのか、完全なURLでなければならないのか?
- その他、標準規格に準拠したブラウザで正しく動作させるために注意すべき点があれば教えてください。
どのように解決するのですか?
パスはフルでも相対でも構いません(もちろん、画像が他のドメインから来たものであればフルでなければなりません)。
URIに引用符を使う必要はなく、どちらの構文でも構いません。
background-image: url(image.jpg);
または
background-image: url("image.jpg");
しかし W3 :
引用符で囲まれていないURIに含まれる一部の文字(括弧、空白文字、一重引用符(')、二重引用符("))は、URI値がURIトークンとなるようにバックスラッシュでエスケープする必要があります: '\(', '\)'.
そのため、このような場合は、引用符や二重引用符を使うか、文字をエスケープする必要があります。
関連
-
[CSSチュートリアル】カットコーナー+ボーダー+プロジェクション+コンテンツ背景色のグラデーション効果を実現するCSS
-
フロントエンドの落とし穴 リソースはスタイルシートとして解釈されるが、MIMEタイプはtext/htmlで転送される。"<URL>". css スタイルの失敗
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] 同じ要素にbackground-imageとCSS3グラデーションを組み合わせるにはどうすればよいですか?
-
[解決済み] visibility:hiddenとdisplay:noneの違いは何ですか?
-
[解決済み] CSSセレクタの"~"(チルダ/スクイグル/ツイドル)はどういう意味ですか?
-
[解決済み] CSS画像を背景で伸縮させる - CSSのみで可能
-
[解決済み] IMGとCSSのbackground-imageはいつ使い分ける?
-
[解決済み】画像要素にbackground-size: coverとcontainに相当するものはありますか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】純粋なCSSでWebページの内容をコピーできないようにする方法
-
[CSSチュートリアル]z-indexの違い。cssのz-index: 0とz-index: autoの違い。
-
[CSSチュートリアル】CSSのクラスとidの共通命名規則
-
[css3]CSS3のダイヤモンドパズルは、divの背景画像を回転させない機能だけを実現するために
-
[CSSチュートリアル】ピュアCSSで実装した通知バーの3種類のスクロール効果
-
[CSSチュートリアル】CSSプロパティ*-gradientの有用性を探る
-
[ブラウザ互換性チュートリアル]IE9でのネイティブページの互換性問題の解決方法について
-
[CSSチュートリアル】よく使われるnth-childセレクタをまとめる
-
[css3]css3によるフレックスレイアウト幅の解決方法が有効でない件
-
[解決済み】url()の値の引用は本当に必要なのでしょうか?