CSS url()関数の操作方法を学ぶ
背景画像について話すとき、@import
、など、url()
リソースをロードする関数:
div {
background-image: url(test.png);
}
この場合、CSSファイルが定義されているフォルダー内のファイルを検索する相対URLを使用しました。
私は1レベル戻ることができました
div {
background-image: url(../test.png);
}
またはフォルダに移動します
div {
background-image: url(subfolder/test.png);
}
または、CSSがホストされているドメインのルートからファイルをロードすることもできます。
div {
background-image: url(/test.png);
}
または、絶対URLを使用して外部リソースをロードすることもできます。
div {
background-image: url(https://mysite.com/test.png);
}
私の無料ダウンロードCSSハンドブック
その他のCSSチュートリアル:
- Flexboxガイド
- CSSグリッドチュートリアル
- CSS変数(カスタムプロパティ)
- PostCSSの概要
- CSSマージンプロパティ
- CSSで要素を中央揃えにする方法
- CSSシステムフォント
- HTMLをスタイルで印刷する方法
- CSSトランジションの入門ガイド
- CSSアニメーションチュートリアル
- CSSの紹介
- CSSガイド
- PurgeCSSとPostCSSでTailwindを設定する方法
- 追い風チートシート
- CSSを使用して画像を連続的に回転させる方法
- CSSを使用してテーブルをレスポンシブにする
- 二等分してCSSをデバッグする方法
- CSSセレクター
- CSSカスケード
- CSSの特異性
- CSS属性セレクター
- CSSカラー
- CSSユニット
- CSS url()
- CSSタイポグラフィ
- CSSボックスモデル
- CSS位置プロパティ
- CSSメディアクエリとレスポンシブデザイン
- CSS機能クエリ
- CSS変換
- CSSを使用してリストのスタイルを設定する方法
- CSSベンダープレフィックス
- CSSの継承
- CSS疑似クラス
- CSS疑似要素
- CSSを使用したHTMLテーブルのスタイリング
- CSSDisplayプロパティ
- CSS calc()関数
- CSSボーダー
- @importを使用してCSSファイルをインポートする
- CSSエラー処理
- CSSフィルター
- CSSボックスのサイズ設定
- CSSの背景
- CSSコメント
- CSSフォント
- CSSパディング
- CSSのfloatプロパティとクリア
- CSSの正規化
- CSSz-indexプロパティ
- CSSを使用してテキスト選択を無効にする方法
- CSSを使用してコンテナの下部にアイテムを配置する方法
- CSSを使用して色を反転する方法
- CSSのレスポンシブプレタグ
- レスポンシブYouTubeビデオ埋め込み
- レスポンシブデザインに適したCSSブレークポイント値は何ですか?
- フレックスボックスの中心を揃える方法