• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Efekt blur dla obrazu CSS

VPS Starter Arubacloud
0 głosów
727 wizyt
pytanie zadane 21 marca 2021 w HTML i CSS przez janzw4 Bywalec (2,050 p.)
zamknięte 22 marca 2021 przez janzw4

Witam, robię stronę i chcę nałożyć efekt rozmycia na obraz znajdujący się w sekcji body w pliku CSS, niestety ale po nałożeniu efektu nakłada się on tylko na diva znajdującego się w <body>. Co mogę zrobić aby efekt blur nakładał się tylko na obraz ? Załączam kod z pliku css i html

body
{
	background-image: url(obraz.jpeg) ;
}
<body>

	<div id="uwaga">
		Uwaga !
		<br><br>
		Strona nie posiada responsywności !
		Do komfortowego korzystania zalecana jest rozdzielczość 1920x1080 
	</div>

</body>

 

komentarz zamknięcia: Uzyskałem odpowiedź jak rozwiązać mój problem
komentarz 22 marca 2021 przez CubeStorm Pasjonat (15,020 p.)
Jeśli ten obrazek to element statyczny na stronie to czy nie lepszym wyjściem będzie nałożenie tego efektu w programie do edycji zdjęć?

2 odpowiedzi

+2 głosów
odpowiedź 21 marca 2021 przez radek024 Szeryf (77,180 p.)
wybrane 22 marca 2021 przez janzw4
 
Najlepsza

Strona nie posiada responsywności ! Do komfortowego korzystania zalecana jest rozdzielczość 1920x1080

huhu. To ten, nie pamiętam pytania, ale strona powinna być responsywna. Myślisz, że klient pomyśli ("a to spoko, już wrzucam to na rozdzielość wskazaną przez osobę, która zrobiła stronę")? No nie, opuści stronę, nie zapoznając się z treścią.

 

blur, podobnie jak opacity jest dziedziczony przez elementy. To, że blur nie działa na tło, może wynikać z tego, że źle podałeś ścieżkę do elementu. Skoro działa na elementy wewnątrz, to działa na ogół na pewno. 

 

Rozwiązać to możesz wykorzystując pseudobloki lub pseudoklasy. Jeżeli Twoim celem jest:

  • rozmazanie tła - wówczas tworzyć pseudoblok i pozycjonujesz do tak, aby zajmował 100% dostępnego miejsca. Następnie ustawiasz tło i blur.
  • rozmazanie wszystkiego poza uwagą. Musisz dodać taki kod CSS, który zaznaczy wszystko, ale nie element od id = uwaga. Do tego służy pseudoselektor :not().

Dla lepszego rozeznania w temacie możesz zapoznać się z następującymi linkami:

+1 głos
odpowiedź 21 marca 2021 przez SzkolnyAdmin Szeryf (86,280 p.)
Daj cały kod, z tego co zamieściłeś nic się nie da wywnioskować.
komentarz 21 marca 2021 przez janzw4 Bywalec (2,050 p.)

Nie umieściłem tutaj tylko kodu odpowiedzialnego za diva w którym jest text, on raczej nie pomoże w niczym ale spoko mogę dać 

#uwaga
{
	margin-left: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-top: 150px;
	width: 800px;
	height: 300px;
	font-size: 40px;
	font-family: 'Comfortaa', cursive;
	text-align: center;
	color: #d6d6d6;
    
}

przy okazji dam jeszcze resztę kodu html

<!DOCTYPE html>
<html>
<head>
  <title>Uwaga !</title>
  <meta charset="utf-8">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Comfortaa&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta name="description" content="Forum oraz zbiór poradników dotyczących tworzenia stron w językach webowych">
  <meta name="keywords" content="programowanie, it, web, php, css, html, strona, internet, wix, poradnik, forum, poradniki, kurs, kursy, informatyka">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>

	<div id="uwaga">
		Uwaga !
		<br><br>
		Strona nie posiada responsywności !
		Do komfortowego korzystania zalecana jest rozdzielczość 1920x1080 
	</div>

</body>
</html>

 

2
komentarz 21 marca 2021 przez SzkolnyAdmin Szeryf (86,280 p.)

Podobne pytania

+1 głos
3 odpowiedzi 1,163 wizyt
pytanie zadane 6 maja 2015 w HTML i CSS przez niezalogowany
0 głosów
2 odpowiedzi 462 wizyt
pytanie zadane 15 lipca 2020 w HTML i CSS przez Marak123 Stary wyjadacz (11,190 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...