Wie verweise ich auf Bilder in CSS? So referenzieren Sie Bilder in CSS

Wie verweise ich auf Bilder in CSS? Was sind die Schritte, um Bilder in CSS zu referenzieren? In diesem Artikel erfahren Sie, wie Sie Bilder in CSS referenzieren. Freunde in Not können darauf verweisen.

Bilder in CSS schreiben: CSS-Referenzbilder

CSS-Referenzbilder Schritt 1: Erstellen Sie einen neuen Bilderordner im src-Verzeichnis und fügen Sie ein Bild

CSS-Referenz ein image Schritt 2: Fügen Sie einen Block in index.html ein

Zum Beispiel: 9084ca87e7f82cffaf3fd15613d1231494b3e26ee717c64999d7867364b1b4a3

css Der dritte Schritt des Zitierens Bilder: Fügen Sie das Hintergrundbild

für #pic in index.css im CSS-Verzeichnis ein. Der vierte Schritt des CSS-Zitats von Bildern: Geben Sie das Webpack in das Terminal ein, um es zu packen und einen Fehler zu melden. Loader und URL im Terminal. -loader

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

Installation erfolgreich

Geben Sie im Terminal ein:

Schritt 5 des CSS-Referenzbilds: Konfigurieren Sie ==url-loader== in ==module== in webpack-config.js (URL-Loader enthält File-Loader, daher ist dies nicht erforderlich Dateiladeprogramm konfigurieren)

//模块：例如解读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)/ ist der Suffixname der passenden Bilddatei.

Verwendung: Dies ist der Konfigurationsparameter, der den verwendeten Loader und Loader angibt.

Beschränkung: Dateien, die kleiner als 500.000 B sind, werden im Base64-Format formatiert und in JS geschrieben.

CSS-Referenzbild Schritt 6: Geben Sie ==webpack== in das Terminal ein, um es zu packen

CSS-Referenzbild Schritt 7: NPM-Server für Browservorschau ausführen

Hinweis:

• [x] URL-Loader kapselt den Dateilader. Der URL-Loader ist nicht vom File-Loader abhängig. Auch wenn Sie den URL-Loader verwenden, müssen Sie den File-Loader nicht installieren, da der URL-Loader über einen integrierten File-Loader verfügt.

• Die URL-Loader-Arbeit ist in zwei Situationen unterteilt:
  

• Die Dateigröße liegt unter dem Grenzwertparameter , URL-Loader wird die Datei in DataURL (Base64-Format) konvertieren;

• Die Dateigröße ist größer als das Limit, URL-Loader ruft File-Loader zur Verarbeitung auf und Die Parameter werden direkt an den Dateilader übergeben. (Tatsächlich müssen wir nur einen URL-Loader installieren. Zur Vereinfachung zukünftiger Vorgänge werden wir hier jedoch den Datei-Loader installieren.)

• Es ist nicht erforderlich, die URL zu konfigurieren -loader Wie oben vorgestellt, müssen Sie es nur in webpack-config.js einführen, wenn Sie Plug-Ins einführen möchten. Was ist der Grund, warum die Ressourcendatei nicht gefunden werden kann?

  Zum Problem der Bildreferenz URLREWRITE.

Das obige ist der detaillierte Inhalt vonWie verweise ich auf Bilder in CSS? So referenzieren Sie Bilder in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!