Jeśli jesteś projektowanie strony internetowej, możesz chcieć dowiedzieć się, jak utworzyć stały obraz tła lub znak wodny na stronie internetowej. Jest to powszechny zabieg projektowy, który jest popularny w Internecie od dłuższego czasu. Jest to przydatny efekt, który możesz mieć w swojej torbie z trikami do projektowania stron internetowych.
Jeśli nie robiłeś tego wcześniej lub próbowałeś wcześniej bez powodzenia, proces może wydawać się onieśmielający, ale w rzeczywistości wcale nie jest bardzo trudny. Dzięki temu krótkiemu samouczkowi w ciągu kilku minut uzyskasz informacje potrzebne do opanowania techniki przy użyciu CSS.
Pierwsze kroki
Obrazy tła lub znaki wodne (które w rzeczywistości są po prostu bardzo jasnymi obrazami tła) mają długą historię w druku. Dokumenty od dawna zawierają znaki wodne, aby zapobiec ich kopiowaniu. Ponadto wiele ulotek i broszur wykorzystuje duże obrazy tła jako część projektu drukowanego elementu. Projektowanie stron internetowych od dawna pożycza style z druku, a obrazy tła są jednym z tych zapożyczonych stylów.
Te duże obrazy tła można łatwo utworzyć za pomocą następujących trzech Styl CSS nieruchomości:
- zdjęcie w tle
- powtarzanie tła
- załącznik w tle
- rozmiar tła
Zdjęcie w tle
Użyjesz obrazu tła, aby zdefiniować obraz, który będzie używany jako znak wodny. Ten styl po prostu używa ścieżki pliku do załadowania obrazu, który masz na swojej stronie, prawdopodobnie w katalogu o nazwie obrazy.
obraz w tle: url(/images/page-background.jpg);
Ważne jest, aby sam obraz był jaśniejszy lub bardziej przezroczysty niż zwykły obraz. Spowoduje to, że „znak wodnywygląd, w którym za tekstem, grafiką i innymi głównymi elementami strony internetowej kryje się półprzezroczysty obraz. Bez tego kroku obraz tła będzie konkurował z informacjami na Twojej stronie i będzie trudny do odczytania.
Możesz dostosować obraz tła w dowolnym programie do edycji, takim jak Adobe Photoshop.
Powtarzanie tła
Właściwość powtarzania w tle jest następna. Jeśli chcesz, aby obraz był dużą grafiką w stylu znaku wodnego, użyj tej właściwości, aby obraz był wyświetlany tylko raz.
powtarzanie w tle: bez powtórzeń;
Bez bez powtórzeń domyślnie obraz będzie się powtarzał na stronie. Jest to niepożądane w większości nowoczesnych projektów stron internetowych, dlatego ten styl powinien być uważany za niezbędny w Twoim CSS.
Załącznik w tle
Dołączanie w tle to właściwość, o której zapomina wielu projektantów stron internetowych. Używanie go utrzymuje obraz tła na miejscu, gdy używasz naprawiony własność. To właśnie zamienia ten obraz w znak wodny, który jest utrwalony na stronie.
Domyślna wartość tej właściwości to zwój. Jeśli nie określisz wartości dołączenia do tła, tło będzie przewijać się wraz z resztą strony.
załącznik w tle: naprawiony;
Rozmiar tła
Background-size to nowsza właściwość CSS. Pozwala ustawić rozmiar tła na podstawie rzutni, w której jest przeglądane. Jest to bardzo pomocne dla responsywne strony internetowe które będą wyświetlane w różnych rozmiarach na różnych urządzeniach.
rozmiar tła: okładka;
Dwie przydatne wartości, których możesz użyć dla tej właściwości, to:
- Pokrywa – Skaluje tło w taki sposób, aby pokazywana była pełna szerokość lub pełna wysokość. Oznacza to, że niektóre części obrazu mogą nie pojawiać się na ekranie, ale cały obszar zostanie zakryty.
- Zawierać – Skaluje obraz tak, aby cała szerokość i wysokość były widoczne w stylizowanym obszarze. Obraz nie jest ucięty, ale wadą jest to, że część obszaru może nie być zakryta przez obraz.
Dodawanie CSS do Twojej strony
Po zrozumieniu powyższych właściwości i ich wartości możesz dodać te style do swojej witryny.
Dodaj następujące elementy do HEAD swojej strony internetowej, jeśli tworzysz witrynę jednostronicową. Dodaj go do stylów CSS zewnętrznego arkusza stylów, jeśli tworzysz witrynę wielostronicową i chcesz wykorzystać moc zewnętrznego arkusza.
Zmień adres URL obrazu tła, aby pasował do określonej nazwy pliku i ścieżki pliku, które są istotne dla Twojej witryny. Wprowadź wszelkie inne odpowiednie zmiany, aby pasowały do twojego projektu, a otrzymasz znak wodny.
Ty też możesz określić pozycję
Jeśli chcesz umieścić znak wodny w określonej lokalizacji na swojej stronie internetowej, możesz to również zrobić. Na przykład możesz chcieć, aby znak wodny znajdował się na środku strony lub być może w dolnym rogu, w przeciwieństwie do górnego rogu, który jest domyślny.
Aby to zrobić, dodaj do swojego stylu właściwość background-position. Spowoduje to umieszczenie obrazu dokładnie w miejscu, w którym chcesz, aby się pojawił. Aby osiągnąć ten efekt pozycjonowania, możesz użyć wartości pikseli, wartości procentowych lub wyrównań.
pozycja tła: środek;