Scuro sfondo immagine css

Darken Immagine significa che stiamo facendo apparire la nostra immagine in modalità scura. Il CSS fornisce proprietà diverse per rendere più scura l'immagine o l'immagine di sfondo. Possiamo usare queste proprietà e impostare i loro valori in base alla nostra scelta e rendere la nostra immagine un'immagine più scura. Il CSS ci offre questa opportunità di rendere le immagini più scure usando tre diverse proprietà. In questo tutorial, renderemo la nostra immagine di sfondo più scura utilizzando le proprietà CSS e ti mostreremo l'immagine più scura e originale.

Proprietà per l'immagine di sfondo scuro in CSS:

Useremo le seguenti tre proprietà che il CSS fornisce per oscurare l'immagine di sfondo. Queste proprietà sono:

• Utilizzo della proprietà Filtro.
• Utilizzo della proprietà dell'immagine in background e impostare il suo valore nel gradiente lineare.
• Utilizzo della proprietà in modalità di miscela in background.

Ora, utilizzeremo tutte queste proprietà nei nostri codici di seguito e imparerai da questi esempi come utilizzare queste proprietà e come impostare il valore di queste proprietà perché spiegheremo anche tutti i codici.

Esempio 1:

Stiamo utilizzando il codice Visual Studio per mostrare gli esempi forniti. Quindi, apriremo il nuovo file e selezioneremo la lingua "HTML", che porterà alla produzione di un file HTML. Quindi, nel file appena generato, iniziamo a scrivere il codice. IL ".L'estensione del file HTML ”viene aggiunta automaticamente al nome del file quando salviamo il codice completato. Ora otteniamo tag di base mettendo "!"Segna e premendo" Invio ". Quando i tag HTML di base sono apparsi in questo file creato, inizieremo aggiungendo un'intestazione.

Quindi, abbiamo anche messo un paragrafo al di sotto di questa intestazione e inseriamo l'immagine dopo questo paragrafo. Se l'immagine viene inserita, abbiamo un altro paragrafo e anche una classe Div con il nome "Image scuri". Qui, il codice HTML è completato. Ora, salvalo e passiamo al file CSS dove aggiungeremo la proprietà "Filtro" per oscurare l'immagine di sfondo.

Per "H1", abbiamo impostato il valore "Font-Family" su "Algerian" e applichiamo anche "colore" su questa intestazione come "verde". La "dimensione del carattere" del testo del paragrafo è "20px" e il suo "colore" è "rosso", "audace" nella sua "fonte". Quindi, utilizzeremo la proprietà "Filtro" per la classe Div "Darkled-Image". Questa proprietà aiuta a rendere l'immagine più scura. Abbiamo usato questa proprietà qui in modo che l'immagine apparirà più scura nell'uscita. Imposta il suo valore usando il valore "luminosità" e selezioniamo luminosità "60%" per questa immagine.

Nella "immagine di sfondo", abbiamo messo lo stesso percorso dell'immagine che abbiamo fornito nel file HTML. Quindi, applichiamo questa proprietà scura all'immagine che abbiamo inserito sopra e vedremo quell'immagine originale e l'immagine scura sullo schermo di output. Abbiamo anche impostato la "larghezza" e "altezza" del div come "200px" e "620px" rispettivamente. Questa proprietà "altezza" imposterà l'altezza del div e la proprietà "larghezza" imposterà la larghezza del div.

Rendiamo questa immagine un'immagine più scura con l'aiuto della proprietà "filtro" CSS e impostando la "luminosità" come valore di questa proprietà. Abbiamo applicato una luminosità "60%" a questa immagine per renderla più scura dell'immagine originale.

Esempio n. 2:

Abbiamo un'intestazione qui e poi aggiungiamo l'immagine. Dopo questa immagine, posizioniamo di nuovo un'intestazione e quindi abbiamo un contenitore di div. Utilizzeremo la seconda proprietà per rendere questa immagine più scura.

Applichiamo il "colore" a questa intestazione come "marrone" e impostiamo il valore di "famiglie di carattere" per "H1" in "algerino". L '"altezza" dell'immagine è impostata su "240px" e la sua "larghezza" è "630px". Quindi, menzioniamo il contenitore Div "Image oscurata" e mettiamo la proprietà "Immagina di background" in cui utilizziamo il "gradiente lineare" e impostiamo il suo valore in forma "RGBA". Qui, usiamo due valori "RGBA" e li impostiamo su "RGBA (0, 0, 0, 0.5) "dove" 0.5 "è il valore alfa. Inseriamo anche l'immagine nel "url ()". Inseriamo il percorso dell'immagine in questo "url ()". L '"altezza" di questo div è "240px" e anche, definiamo la sua "larghezza" a "630px".

Nell'output, si possono vedere sia le versioni originali che quelle scure dell'immagine. L'immagine originale e l'immagine scura possono essere chiaramente distinte l'una dall'altra nello screenshot sottostante. L'immagine scura viene resa perché abbiamo utilizzato la proprietà "Immagina di fondo" e impostato il suo valore nel tipo "Lineare-Gradient".

Esempio # 3:

Abbiamo usato il codice HTML sopra e inseriamo un'altra immagine in questo codice. Useremo la "modalità di miscela di sfondo" per creare l'effetto dell'immagine scuri sull'immagine.

Abbiamo impostato il valore "Font-Family" per "H1" su "Algerian" e applichiamo "colore" su questa intestazione su "Marone". La "larghezza" dell'immagine è "630px" e la sua "altezza" è "250px". Utilizziamo il nome della classe Div come "immagine scura" e applichiamo alcune proprietà ad esso. Utilizziamo la proprietà "Background" e posizioniamo qui il valore "RGBA". Il valore "RGBA" che stiamo utilizzando è "(0, 0, 0, 0.7) "e quindi abbiamo la proprietà" URL "che utilizziamo per dare il percorso dell'immagine. Diamo il percorso dell'immagine come "MyNewImage.PNG ".

Successivamente, abbiamo la proprietà "Ripeti di background" e utilizziamo la parola chiave "no-repeat" come valore di questa proprietà. Ora, abbiamo anche impostato la "dimensione dello sfondo" e posizioniamo "copertina" in modo che l'immagine copra tutto lo sfondo. La proprietà "in modalità miscela di sfondo" è per applicare l'effetto oscurante all'immagine. Lo impostiamo come la parola chiave "scuri". Quindi, quando questa immagine si renderà sullo schermo di output, apparirà come un'immagine scura a causa di questa proprietà. L '"altezza" del div chiamato "image scuri" è regolata a "330px" e abbiamo anche impostato la sua "larghezza" che è "650px". Ora, guarda l'uscita di come appariranno queste immagini.

Sia le forme originali che le forme più scure dell'immagine sono visibili nel risultato. Qui nell'istantanea seguente, è possibile dire facilmente la differenza tra l'immagine originale e l'immagine scura. Abbiamo usato l'attributo "in modalità di miscela di sfondo" e abbiamo posizionato la parola chiave "più scura" come valore di questo attributo per rendere l'immagine scura.

Conclusione

Abbiamo coperto a fondo questo concetto e abbiamo esaminato numerosi casi su come oscurare l'immagine di sfondo in CSS. Come menzionato in precedenza, abbiamo usato tre diverse proprietà per oscurare l'immagine di sfondo. Abbiamo utilizzato tutte e tre le proprietà nei nostri codici. Abbiamo anche coperto come usare queste proprietà e come impostare il loro valore. Abbiamo discusso che abbiamo la proprietà "Filtro", la proprietà "Immagina Background" e anche la proprietà "Modice Bambola" per rendere più scura l'immagine di sfondo. Abbiamo anche fornito i risultati di tutti questi codici in cui abbiamo reso sia la scura che l'immagine originale sullo schermo di output. A tuo vantaggio, abbiamo creato un tutorial completo in cui il codice viene fornito sia e spiegato a fondo, insieme ai risultati.