CSSで画像を参照するにはどうすればよいですか? CSSで画像を参照する方法

CSS で画像を参照するにはどうすればよいですか? CSSで画像を参照する手順は何ですか?この記事ではCSSで画像を参照する方法を紹介しますので、困っている方は参考にしていただければ幸いです。

CSS に画像を書き込む: CSS 参照画像

CSS 参照画像 ステップ 1: src ディレクトリに新しい画像フォルダーを作成し、画像を配置します

Css 参照画像 ステップ 2: Index.html にブロックを挿入します

例:

css 参照画像 ステップ 3: css ディレクトリのindex.css に #pic の背景画像を挿入します

css 画像を引用する ステップ 4:エラーをパッケージ化するには、ターミナルで webpack と入力します。ターミナルで ffile-loader と url-loader を設定する必要があります

npm install –save-dev file-loader url-loader

インストール成功

ターミナルに次のように入力します。

Css 参考画像 ステップ 5: webpack-config.js の ==module== に ==url-loader== を設定します (url-loader には file-loader が含まれているため、file-loader を設定する必要はありません)

//模块：例如解读CSS,图片如何转换，压缩module:{
     rules: [
         {
           test: /\.css$/,           use: [ 'style-loader', 'css-loader' ]
         },{
            test:/\.(png|jpg|gif)/ ,            use:[{
                loader:'url-loader',
                options:{
                    limit:500000
                }
            }]
         }
       ]
 },

test:/.(png|jpg|gif)/ は、一致する画像ファイルのサフィックス名です。

use: 使用するローダーとローダーを指定する構成パラメーターです。

制限: 500000B 未満のファイルを Base64 形式に変換し、JS に書き込みます。

CSS 参照画像 ステップ 6: ターミナルに ==webpack== と入力してパッケージ化します

CSS 参照画像 ステップ 7: ブラウザー プレビュー用に npm サーバーを実行します

注:

• [x] url-loader package file-ローダ。 url-loader は file-loader に依存しません。url-loader を使用する場合でも、url-loader には file-loader が組み込まれているため、file-loader をインストールする必要はありません。

• url-loader は 2 つの状況で動作します:
  

• ファイル サイズが制限パラメータより小さい場合、url-loader はファイルを DataURL (Base64 形式) に変換します。が制限を超えている場合、url-loader は処理のために file-loader を呼び出し、パラメータは file-loader に直接渡されます。 (実際には、URL ローダーを 1 つインストールするだけで済みます。ただし、今後の操作の便宜のために、ここではファイル ローダーをインストールします。)

• URL ローダーを設定する場合、URL ローダーを導入する必要はありません上記、プラグインを導入したい場合のみwebpack-config.jsに導入する必要があります

• 関連推奨事項:

CSS参照画像をパッケージ化した後にリソースファイルが見つからない場合があります

画像参照URLREWRITEの問題について。

以上がCSSで画像を参照するにはどうすればよいですか? CSSで画像を参照する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。