Полупрозрачный фон

Я хотел бы показать как быстро сделать полупрозрачный фон. Если в CSS использовать команду opacity, то фон конечно же станет прозрачным, но вместе с ним также и всё остальное что на нём находится.

Как же исправить эту проблему? Я порылся в Интернете и нашёл замечательный способ, о котором я вам сейчас и поведаю.

Допустим, это ваш сайт (html):

<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="style.css">
		<title>
			Полупрозрачный фон
		</title>
	</head>
		<body>
			<div class="mid">
				<p>Ваш текст</p>
				Ваш текст. Ваш текст.
			</div>
		</body>
</html>

Строчка "" подключает файл стилей CSS.

Вот он (он называется style.css):

body{
	background: "Ваша картинка для фона" ; *
	background-attachment: fixed ;
	background-position: top center;
}
.mid{
	width: 1250px;**
	margin: 0 auto;
	background: rgba(161,21,207, 0.5);***
}


В классе mid 3 строчка задаёт цвет полупрозрачного цвета в формате RGBA. Её 4 цифра, в данном случае 0.5 — значение прозрачности от 0 до 1.

Вот так всё просто. Пробуйте, у вас обязательно всё получится!

* — вставляете сюда url картинки
** — задаём ширину страницы (для этого в html — коде мы создали class mid)
*** — rgba — это цвет в формате rgb. Последняя буква (a) означает прозрачность фона. Её значение — цифра от 0 до 1. 0 — полностью прозрачный фон, соответственно, 1 — наоборот.
Share post

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 26

    +1

    Большое спасибо, что делитесь опытом, но в данном случае вопрос слишком тривиальный и его решение доступно по каждой ссылке на первой странице поиска по запросу, например, "css opaque background color".

      +6

      Не то, чтобы это что-то меняло, но все же немного позанудствую. Opaque — это НЕпрозрачный. Правильный ответ, конечно же, находится и по такому запросу, но вот сам запрос задаёт прямо противоположный вопрос. Запросы со словами opacity, alpha, transparent или semi-transparent вместо opaque работают не хуже.

        0

        Хорошо, хабр как раз для этого) Спасибо.

      +4
      Спрячте в черновики, а то скоро вообще кармы лишитесь
        +1
        Я такое в снипетах оставляю.
        Я верю что у некоторых есть снипеты которые стоят целую статью, но это не о ней.
          +11

          А давайте попросим пользователя ivan386 объяснить за что был дан инвайт? Это даже пересказом документации не назвать.

            –14

            Я захотел выдать инвайт кому-то с того конца песочницы. Человек ждал инвайта с 2015 года. Это статья без заморочек. Чётко отвечает на вопрос. Решил отдать инвайт.

              +4
              Медвежью услугу вы оказали товарищу. Он походу вообще забыл уже что зарегистрирован на хабре. А теперь еще и заехал с отрицательной кармой.
                0

                Да он конечно мог написать ещё статей в песочницу. Или быть в статусе Read&Comment. Не ожидал я что сообщество так негативно отреагирует на безобидную статейку новичка. Но никто не безупречен и я тоже ошибаюсь в своих решениях.

                  +1
                  IMHO, товарищ сам себе эту услугу оказал — ведь именно он поместил статью в песочницу, а инвайт — это именно то, на что он при этом рассчитывал предположительно
                +1

                Может я чего-то недопонимаю, но почему ivan386 должен отвечать за содержание статьи того человека, которого он пригласил?

                  +5
                  Потому что Хабр — полу-закрытое сообщество. И мне кажется, что люди должны дважды думать, прежде чем отдавать кому-то инвайт. Если ты кого-то пригласил — считай, что поручился за него.

                  Кроме того, на сколько я понимаю — это приглашение было дано через песочницу. Следовательно, ivan386 одобрил этот контент. Что почти тоже самое, как если бы он сам опубликовал этот материал.
                    +1

                    Теперь я окончательно въехал в то что произошло. Вопросов нет. Претензии к ivan386 вполне адекватны.

                      0
                      Потому что Хабр — полу-закрытое сообщество. И мне кажется, что люди должны дважды думать, прежде чем отдавать кому-то инвайт. Если ты кого-то пригласил — считай, что поручился за него.

                      Это правда. Но интерфейс не отображает такую ответственность. Я зашел к одному пользователю в профиль, и случайно нажал на "пригласить", и без подтверждения был выслан инвайт пользователю с кармой -15. Кто это такой, почему у него такая карма я не знаю, но теперь я должен за него ручаться.

                        +1
                        В другой раз вы можете в тот же момент, максимально быстро написать модератору, что выдали инвайт по ошибке. Но на самом деле нажать кнопку «Подарить приглашение» случайно не так-то просто :-) По крайней мне, ваш «заинвайченный» активен на сайте.
                          +1
                          В другой раз вы можете в тот же момент, максимально быстро написать модератору, что выдали инвайт по ошибке.

                          Это некрасиво. Человеку на почту все равно уже ушло.


                          Но на самом деле нажать кнопку «Подарить приглашение» случайно не так-то просто :-)

                          Я не промахнулся. У меня кнопка появилась впервые, и я не подумав, рассчитывал, что сейчас вылезет окно в стиле "Вы действительно хотите отдать инвайт? У вас инвайтов n из M. Инвайты это тотототото". Так обычно и происходит в интерфейсах, если действие на кнопке имеет какие-то последствия.

                            0

                            Полагаться на метод тыка не самый лучший вариант, как вы смогли убедиться.

                  +4
                  Автор статьи O_Kompah был последний раз очень давно

                  Activity 12/21/16, 6:42 PM
                  Registered August 10, 2015

                  Похоже, что его бессмысленно минусить.
                    +1

                    Для тех кто разочарован краткостью и банальностью данной статьи прикладываю более подробную статью: Кроссбраузерная одноцветная полупрозрачность

                      +1
                      10 лет тому назад…
                        +1
                        ivan386, в том то и дело, что хороша ложка к обеду. Но не в 2019 году.
                          –6

                          Думаю год не имеет значения. Более значимо то что эта информация уже доступна из многих источников. Люди всегда будут учиться и кому то эта информация актуальна даже в этом году. Несмотря на все минусы этой статьи 19 человек посчитали нужным добавить её в закладки.


                          Не сказал бы я что часто вижу использование RGBA там где не нужна прозрачность. Так что существование этой функции наверно не столь очевидно для новичков.

                        +1
                        Так же можно использовать не только rgba(), но и HEX значение.
                        Значение цвета в HEX ( для примера #548eaa): после 6 символов добавить ещё 2 в той же шестнадцатеричной системе, к примеру #548eaaa0.
                        Из минусов HEX в этой ситуации — не поддерживается IE.
                          0

                          Вот что альфу уже в HEX завезли не знал.

                        • UFO just landed and posted this here
                            0
                            Просто, доступно, полезно. На самом деле нет. Даже если оставить в стороне актуальность вопроса, мало чего понятно. Что за ? Для чего он? А, в нём фон прозрачим! А я хотел не в нём, а вообще везде и на соседних сайтах тоже? А рамки пролупрозрачные через rgba делать можно? А градиенты?

                            Only users with full accounts can post comments. Log in, please.