Technika nakładki w CSS to sposób na transpozycję tekstu nad obrazami. CSS „zdjęcie w tle”I CSS”tło„Właściwości są używane do osiągnięcia tego efektu nakładki. Celem tego artykułu jest zbadanie, jak używać CSS do ustawienia obrazu nakładki.

Wyniki tego artykułu to:

• • Co to jest właściwość tła w CSS?
  • Czym jest właściwość tła w CSS?
  • Jak ustawić obraz nakładki kolorem?

Zacznijmy!

właściwość obrazu tła

Aby dodać obraz jako tło dowolnych elementów HTML, „zdjęcie w tle„Własność można wykorzystać.

Składnia

Składnia właściwości w tle Image to:

Image tła: obraz URL ();

Określ nazwę obrazu lub jego pełną ścieżkę w ramach URL ().

Czym jest właściwość tła w CSS?

Jest to właściwość skrótów używana do przypisywania różnych wartości do obrazu, takich jak kolor, rozmiar, pozycja i tak dalej.

Składnia

Składnia właściwości tła to:

Tło: kolor | pozycja | rozmiar;

• • kolor: Służy do przypisywania koloru tła.
  • pozycja: Służy do ustawiania pozycji tła.
  • rozmiar: Służy do określenia rozmiaru tła.

Oto przykład wyjaśnienia tego punktu.

Przykład: jak ustawić obraz nakładki kolorowym?

W tym przykładzie najpierw utworzymy div, o nazwie „narzuta”I wewnątrz div dodaliśmy rękę

etykietka:

Nakładka obrazu

Teraz dodamy obraz tła za pomocą CSS. Jak "URL ()”, Podaliśmy ścieżkę obrazu i przypisaliśmy szerokość„350px, wysokość "250px”I pozycja„absolutny”Obrazu:

.obraz
Tło: URL („Obraz.jpg ") bez powtórzenia;
Szerokość: 350px;
Wysokość: 250px;
Pozycja: absolutna;

To da następujące dane wyjściowe:

Teraz przejdźmy o krok dalej, aby zastosować do niego efekt nakładki:

.narzuta
Tło: RGBA (233, 140, 0, 0.7);
margines: 10px;
margines lewic: 55px;
szerokość: 200px;
Rozmiar czcionki: 25px;
Kolor: RGB (252, 80, 0);
Pozycja: absolutna;

Tutaj wykorzystaliśmy różne właściwości CSS do obsługi różnych funkcji:

• • tło: Przypisaliśmy kolor nakładki za pomocą właściwości tła.
  • margines: Aby określić pozycję nakładki, użyj właściwości marginesu.
  • szerokość: Ten parametr określa rozmiar nakładki wyświetlanej na obrazie tła.
  • rozmiar czcionki: Określa rozmiar czcionki.
  • kolor: Ustawia kolor tekstu.
  • pozycja: Określa, gdzie pojawi się tekst.

Po wdrożeniu wyżej wymienionych punktów zapisz kod pliku HTML i CSS i sprawdź wynik:

Podaliśmy metodę ustawiania obrazu nakładki z kolorem w CSS.

Wniosek

Efekt nakładki można osiągnąć za pomocą CSS ”zdjęcie w tle”I CSS”tło" nieruchomości. Można to zrobić, przypisując obraz do właściwości obrazu tła i ustawiając kolor we właściwości tła. Ponadto jest to technika łączenia więcej niż jednego elementu w jednym pojemniku. Ten post wykazał, jak ustawić obrazy nakładki kolorem w CSS, przy użyciu przykładów.