Καλημέρα, geeks ανάπτυξης ιστοσελίδων, καθώς και αρχάριοι. Για όσους δεν ακολουθούν τις τάσεις της πληροφορικής, ή μάλλον τη μόδα του διαδικτύου, θα ήθελα να σας ενημερώσω επίσημα ότι αυτή η δημοσίευση με θέμα: "Πώς να φτιάξετε ένα διαφανές μπλοκ με εργαλεία css" είναι η κατάλληλη για εσάς. Πράγματι, το τρέχον 2016, η εισαγωγή διαφόρων διαφανών αντικειμένων στις διαδικτυακές υπηρεσίες θεωρείται μια κομψή κίνηση.

Επομένως, σε αυτό το άρθρο θα σας πω για όλες τις υπάρχουσες μεθόδους δημιουργίας διαφάνειας, ξεκινώντας από τις προκατακλυσμιαίες λύσεις, θα εστιάσω στη συμβατότητα λύσεων με προγράμματα περιήγησης και θα δώσω επίσης συγκεκριμένα παραδείγματα κώδικα προγράμματος. Τώρα ας πιάσουμε τη δουλειά!

Μέθοδος 1. Προκατακλυσμιαία

Πότε υπήρχαν ακόμα αδύναμοι υπολογιστέςΚαι οι «ικανότητες» δεν αναπτύσσονται, οι προγραμματιστές έχουν βρει τον δικό τους τρόπο δημιουργίας διαφανούς φόντου: χρησιμοποιώντας διαφανή pixel με τη σειρά τους με έγχρωμα. Το μπλοκ που δημιουργήθηκε με αυτόν τον τρόπο έμοιαζε με σκακιέρα όταν κλιμακώνονταν, αλλά σε κανονικό μέγεθος έμοιαζε με κάποιο είδος διαφάνειας.

Αυτό, κατά τη γνώμη μου, σίγουρα βοηθάει σε παλαιότερες εκδόσεις προγραμμάτων περιήγησης στις οποίες οι σύγχρονες λύσεις δεν λειτουργούν. Αξίζει όμως να σημειωθεί ότι η ποιότητα εμφάνισης κειμένου , εγγεγραμμένο σε τέτοια, πέφτει απότομα.

Μέθοδος 2. Δεν ενοχλεί

Σε σπάνιες περιπτώσεις, οι προγραμματιστές λύνουν το πρόβλημα της εισαγωγής ημιδιαφανούς εικόνας εισάγοντας... έτοιμη ημιδιαφανή εικόνα! Για το σκοπό αυτό, χρησιμοποιούνται εικόνες που είναι αποθηκευμένες σε μορφή PNG-24. Αυτή η μορφή γραφικών σάς επιτρέπει να ορίσετε 256 επίπεδα ημιδιαφάνειας.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Ωστόσο, αυτή η μέθοδος δεν είναι βολική για διάφορους λόγους:

1. Internet Explorer 6 δεν λειτουργεί με αυτήν την τεχνολογία, πρέπει να γράψετε κώδικα σεναρίου για αυτό.
2. Δεν μπορείτε να αλλάξετε τα χρώματα φόντου στο css.
3. Εάν η λειτουργία εμφάνισης εικόνων του προγράμματος περιήγησης είναι απενεργοποιημένη, θα εξαφανιστεί.

Μέθοδος 3. Προωθήθηκε

Το πιο κοινό και όλοι γνωστή μέθοδοςτο make some block transparent είναι μια ιδιότητα αδιαφάνεια.

Η τιμή της παραμέτρου ποικίλλει στο εύρος, όπου στο 0 το αντικείμενο είναι αόρατο και στο 1 εμφανίζεται πλήρως. Ωστόσο, υπάρχουν και εδώ κάποιες δυσάρεστες στιγμές.

Πρώτον, όλα τα θυγατρικά στοιχεία κληρονομούν τη διαφάνεια. Αυτό σημαίνει ότι το κείμενο που εισαγάγατε θα "διαφανεί" μαζί με το φόντο.

Δεύτερον, ο Internet Explorer και πάλι «σηκώνει τη μύτη του» και, μέχρι την έκδοση 8, δεν λειτουργεί με αδιαφάνεια.

Για να λύσετε αυτό το πρόβλημα, χρησιμοποιήστε φίλτρο:άλφα (Αδιαφάνεια=τιμή).

Ας δούμε ένα παράδειγμα.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Μέθοδος 4. Σύγχρονη

Σήμερα, οι επαγγελματίες χρησιμοποιούν το εργαλείο rgba (r, g, b, a).

Προηγουμένως, σας είπα ότι το RGB είναι ένα από τα δημοφιλή μοντέλα χρωμάτων, όπου το R είναι υπεύθυνο για όλες τις αποχρώσεις του κόκκινου, το G για τις αποχρώσεις του πράσινου και το B για τις αποχρώσεις του μπλε.

Στην περίπτωση της παραμέτρου css, η μεταβλητή A είναι υπεύθυνη για το κανάλι άλφα, το οποίο με τη σειρά του είναι υπεύθυνο για τη διαφάνεια.

Το κύριο πλεονέκτημα της τελευταίας μεθόδου είναι ότι το κανάλι άλφα δεν επηρεάζει αντικείμενα που βρίσκονται μέσα στο στυλιζαρισμένο μπλοκ.

Το rgba(r, g, b, a) υποστηρίζεται ξεκινώντας από:

• Opera έκδοση 10.
• Internet Explorer 9;
• Safari 3.2;
• 3 εκδόσεις του Firefox.

Θέλω να σημειώσω ενδιαφέρον γεγονός! Ο αγαπημένος Internet Explorer 7 παρουσιάζει ένα σφάλμα κατά το συνδυασμό ιδιοτήτων χρώμα φόντουμε το όνομα των χρωμάτων (φόντο-χρώμα: χρυσό). Επομένως, θα πρέπει να χρησιμοποιείτε μόνο:

χρώμα φόντου: rgba (255, 215, 0, 0,15)

Και τώρα ένα παράδειγμα.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

Στο κατάστημά μας θα βρείτε όλων των ειδών τα λουλούδια.

Σημειώστε ότι το περιεχόμενο κειμένου του μπλοκ είναι πλήρως ορατό (100% μαύρο), ενώ το φόντο έχει οριστεί σε κανάλι άλφα 0,88, δηλ. 88%.

Αυτό ολοκληρώνει τη δημοσίευση. Εγγραφείτε στο blog μου και μην ξεχάσετε να προσκαλέσετε φίλους. Σας εύχομαι καλή επιτυχία στην εκμάθηση γλωσσών ιστού! Αντίο!

Η διαφάνεια του φόντου στον ιστότοπο δημιουργείται μέσω ιδιοτήτων CSS. Μπορείτε να επιτύχετε διαφάνεια με δύο τρόπους: μέσω της ιδιότητας αδιαφάνειας και του background:rgba(). Ας δούμε το καθένα από αυτά και στη συνέχεια ας κάνουμε μια σύγκριση.

1. Ιδιότητα αδιαφάνειας CSS για διαφάνεια φόντου

Το CSS έχει την ιδιότητα αδιαφάνειας, η οποία μπορεί να χρησιμοποιηθεί για τη ρύθμιση της διαφάνειας εικόνων, κειμένων, συμπεριλαμβανομένων των φόντων.

Η διαφάνεια μπορεί να οριστεί απλά προσδιορίζοντας πραγματικός αριθμόςαπό 0,0 έως 1,0. Όσο μικρότερος είναι ο αριθμός, τόσο λιγότερο αισθητό θα είναι το αντικείμενο.

αδιαφάνεια: 0,5; // Ημιδιαφάνειααδιαφάνεια: 0,2; // Το αντικείμενο είναι ορατό μόνο κατά 20%.αδιαφάνεια: 0,8; // Το αντικείμενο είναι ορατό μόνο κατά 80%.

Ας δούμε ένα παράδειγμα με την ιδιότητα αδιαφάνειας.

Текст также прозрачный

Этот код преобразуется на странице в следующее:

Текст также прозрачный

2. Прозрачность через свойство CSS background:rgba()

Вторым вариантом задания прозрачности фона на сайте является свойство CSS background:rgba. Рассмотрим пример

Текст также прозрачный

Этот код преобразуется на странице в следующее.

Довольно часто можно найти в Интернете подходящее изображение, например, чтобы вставить его на веб-сайт. А возможно, Вы делаете коллаж, и нужно на один рисунок добавить другие. Вот только нужные изображения обычно имеют какой-либо фон.

Давайте разберемся, как можно сделать прозрачный фон для картинки с помощью редактора Adobe Photoshop . У меня установлена англоязычная версия Adobe Photoshop CS5, поэтому показывать буду на нем.

Постараюсь приводить различные сочетания горячих клавиш.

Если у Вас еще не установлен фотошоп, Вы им очень редко пользуетесь или он на английском, можете сделать прозрачный фон в Paint.net. Это простой русскоязычный редактор изображений, который займет не много места на жестком диске. Перейдя по ссылке, Вы можете прочесть подробную статью. Скачать программу Paint.net можно с нашего сайта.

Для начала рассмотрим простой пример. Предположим, у Вас есть изображение на однотонном фоне, это может быть логотип или название чего-либо. Сделаем этот логотип или надпись на прозрачном фоне в фотошоп.

Открываем нужное изображение в редакторе. Теперь сделаем прозрачный фон для слоя. В окне «Слои» кликаем два раза мышкой по добавленному слою – напротив него будет стоять замочек. Откроется окно «Новый слой», нажмите в нем «ОК». После этого замочек исчезнет.

Выбираем инструмент «Волшебная палочка». В строке свойств укажите уровень чувствительности, позадавайте разные значения, чтобы понять, как он работает, например 20 и 100. Чтобы снять выделение с рисунка нажмите «Ctrl+D».

Задаем чувствительность и нажимаем волшебной палочкой на область фона. Чтобы добавить к выделенному фону, те части, которые не выделились, зажмите «Shift» и продолжайте выделение. Для удаления выделенных областей нажмите «Delete».

Теперь вместо фона шахматная доска – это значит, что у нас получилось сделать белый фон прозрачным. Снимаем выделение – «Ctrl+D».

Если у Вас изображение или фотография, на которой много различных цветов и объектов, рассмотрим, как сделать прозрачный фон для изображения в фотошопе.

В этом случае, воспользуемся инструментом «Быстрое выделение». Кликаем по волшебной палочке левой кнопкой мыши с небольшой задержкой и выбираем из меню нужный инструмент.

Теперь нужно выделить объект, который мы хотим оставить на прозрачном фоне. В строке свойств устанавливайте различные размеры и кликайте на объект, добавляя к нему области. Если ошибочно выделится ненужный фон, нажмите «Alt» и уберите его.

Для просмотра результата нажмите «Q». Розовым будут выделены те части изображения, которые станут прозрачными.

Копируем выделенные области, нажав «Ctrl+C». Дальше создаем новый файл, «Ctrl+N», с прозрачным фоном.

Вставляем в него скопированные фрагменты, «Ctrl+V». Если на них остались ненужные части фона, уберите их, используя инструмент «Ластик». Сохраняем сделанные на прозрачном фоне картинки в формате PNG или GIF.

Делайте белый фон рисунка прозрачным, или делайте прозрачный фон для отдельных фрагментов цветного изображения или фотографии в фотошопе. После этого, можно их использовать там, где это необходимо: вставлять на сайт, добавлять на другой рисунок или делать интересные коллажи.

Прозрачность фона CSS

Прозрачность фона на сайте создается через свойста CSS. Добиться прозрачности можо двумя способами: через свойство opacity и background:rgba(). Давайте рассмотрим каждый из них, а далее проведем сравнение.

1. Свойство CSS opacity для прозрачности фона

В CSS есть свойство opacity с помощью которого можно задавать прозрачность изображений, текстов, в том числе и фонов.

Задание прозрачности задается просто указанием вещественного числа от 0.0 до 1.0. Чем меньше число, тем менее заметен будет объект.

opacity: 0.5; // Полупрозрачностьopacity: 0.2; // Объект виден только на 20%opacity: 0.8; // Объект виден только на 80%

Давайте рассмотрим пример со свойством opacity.

Το κείμενο είναι επίσης διαφανές