Jak zamazać obraz tła w CSS

W aplikacjach internetowych korzystanie z obrazów w tle jest świetnym podejściem do stworzenia estetycznej strony internetowej. Czasami konieczne jest zatarcie obrazu tła, aby skupić się na zawartości strony. Ponadto sprawia, że ​​strona internetowa wygląda inaczej niż tysiące innych stron internetowych. CSS oferuje wiele funkcji manipulowania obrazem tła.

Ten przewodnik obejmie sposób zamazania obrazu tła w CSS.

Jak zamazać obraz tła w CSS?

Aby obraz tła w mgnieniu oka w krótkim czasie, użyjemy właściwości CSS „Filtr”. Wykorzystanie właściwości filtra pomoże nam wydajnie w rozmyciu obrazów.

Więc wskoczmy w szczegóły.

Co to jest właściwość filtra w CSS?

W CSS, aby umieścić pewne graficzne efekty na elementach HTML, „filtr„Własność jest używana. Na przykład, jeśli chcesz umieścić pewne efekty na obrazie, takie jak rozmycie lub kontrast, możesz użyć właściwości filtra.

Składnia:

Filtr: Blur () | jasność () | hue-rrotate () | kontrast () | Kryta () | Grayscale () | invert () | Drop-Shadow () | SETATATE () | sepia () | url () | nic

Ponieważ właściwość filtra ma wiele wartości, a jeśli opracujemy kilka takich jak jasność (), czyni elementy jasne lub ciemne, krycie i nieciciple () gra z przezroczystością, Blur () powoduje rozmycie elementów HTML i żaden nie usuwa efektów, jeśli są obecne.

Idźmy więc naprzód i głęboko zrozummy z przykładem, że możemy rozmyć obraz tła w CSS.

Przykład

Oto obraz tła na naszej stronie internetowej, spraw, aby się rozmyć.

W pliku HTML weź „„Element wewnątrz„„Tag.

Html

Teraz przejdźmy do kodu CSS:

• Określić "tło„Własność o wartości”URL" I "bez powtórki". To ustawi nie powtórzony obraz tła.
• Przydzielić odpowiednie miejsce na obraz za pomocą „wyściółka„Własność o wartości”25%".
• W następnym kroku przypisamy „filtr„Własność wartości”Blur (9px)„Aby obraz wyglądał rozmyty. Wartość wewnątrz Blur (), „9px”Umożliwia kontrolowanie tego, ile chcemy zacierać wybrany obraz. Z drugiej strony, jeśli zmniejszymy wartość do 6 lub 7px, sprawi, że obraz będzie wyglądał mniej rozmyty. Ponadto możemy użyć urządzenia „rem”Zamiast PX.

CSS

div
Tło: URL (drzewa.jpg) bez powtórzenia;
Wyściółka: 25%;
Filtr: Blur (9px);

Na koniec zapisz kod i otwórz go w przeglądarce, aby zweryfikować działanie.

Wyjaśniliśmy, jak łatwo rozmyć obraz tła w CSS.

Wniosek

Aby obraz tła rozmył się, użyj CSS ”filtr„Własność o wartości”plama()". Rozmycie wartości można zmodyfikować w celu kontrolowania rozmycia częstotliwości określonego obrazu. Możesz ustawić wartość w PX lub REM, aby zwiększyć lub zmniejszyć efekt rozmycia na obraz. W tym artykule wyjaśniono, jak zacierać obraz tła w CSS.