Как же исправить эту проблему? Я порылся в Интернете и нашёл замечательный способ, о котором я вам сейчас и поведаю.
Допустим, это ваш сайт (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 — наоборот.
Комментарии (24)
ponich
26.01.2019 02:39Я такое в снипетах оставляю.
Я верю что у некоторых есть снипеты которые стоят целую статью, но это не о ней.
ReklatsMasters
26.01.2019 03:13+2А давайте попросим пользователя ivan386 объяснить за что был дан инвайт? Это даже пересказом документации не назвать.
ivan386
26.01.2019 10:59Я захотел выдать инвайт кому-то с того конца песочницы. Человек ждал инвайта с 2015 года. Это статья без заморочек. Чётко отвечает на вопрос. Решил отдать инвайт.
greabock
26.01.2019 15:47+3Медвежью услугу вы оказали товарищу. Он походу вообще забыл уже что зарегистрирован на хабре. А теперь еще и заехал с отрицательной кармой.
ivan386
26.01.2019 19:13Да он конечно мог написать ещё статей в песочницу. Или быть в статусе Read&Comment. Не ожидал я что сообщество так негативно отреагирует на безобидную статейку новичка. Но никто не безупречен и я тоже ошибаюсь в своих решениях.
maxzhurkin
27.01.2019 02:39+1IMHO, товарищ сам себе эту услугу оказал — ведь именно он поместил статью в песочницу, а инвайт — это именно то, на что он при этом рассчитывал предположительно
AntonSazonov
26.01.2019 16:21Может я чего-то недопонимаю, но почему ivan386 должен отвечать за содержание статьи того человека, которого он пригласил?
greabock
26.01.2019 16:39+3Потому что Хабр — полу-закрытое сообщество. И мне кажется, что люди должны дважды думать, прежде чем отдавать кому-то инвайт. Если ты кого-то пригласил — считай, что поручился за него.
Кроме того, на сколько я понимаю — это приглашение было дано через песочницу. Следовательно, ivan386 одобрил этот контент. Что почти тоже самое, как если бы он сам опубликовал этот материал.AntonSazonov
26.01.2019 17:37Теперь я окончательно въехал в то что произошло. Вопросов нет. Претензии к ivan386 вполне адекватны.
Vlad_IT
26.01.2019 20:22Потому что Хабр — полу-закрытое сообщество. И мне кажется, что люди должны дважды думать, прежде чем отдавать кому-то инвайт. Если ты кого-то пригласил — считай, что поручился за него.
Это правда. Но интерфейс не отображает такую ответственность. Я зашел к одному пользователю в профиль, и случайно нажал на "пригласить", и без подтверждения был выслан инвайт пользователю с кармой -15. Кто это такой, почему у него такая карма я не знаю, но теперь я должен за него ручаться.
Exosphere
26.01.2019 21:17+1В другой раз вы можете в тот же момент, максимально быстро написать модератору, что выдали инвайт по ошибке. Но на самом деле нажать кнопку «Подарить приглашение» случайно не так-то просто :-) По крайней мне, ваш «заинвайченный» активен на сайте.
Vlad_IT
27.01.2019 00:45+1В другой раз вы можете в тот же момент, максимально быстро написать модератору, что выдали инвайт по ошибке.
Это некрасиво. Человеку на почту все равно уже ушло.
Но на самом деле нажать кнопку «Подарить приглашение» случайно не так-то просто :-)
Я не промахнулся. У меня кнопка появилась впервые, и я не подумав, рассчитывал, что сейчас вылезет окно в стиле "Вы действительно хотите отдать инвайт? У вас инвайтов n из M. Инвайты это тотототото". Так обычно и происходит в интерфейсах, если действие на кнопке имеет какие-то последствия.
Andrew_Pinkerton
26.01.2019 10:54+2Автор статьи O_Kompah был последний раз очень давно
Activity 12/21/16, 6:42 PM
Registered August 10, 2015
Похоже, что его бессмысленно минусить.
ivan386
26.01.2019 11:20Для тех кто разочарован краткостью и банальностью данной статьи прикладываю более подробную статью: Кроссбраузерная одноцветная полупрозрачность
vin2809
26.01.2019 15:05+1ivan386, в том то и дело, что хороша ложка к обеду. Но не в 2019 году.
ivan386
26.01.2019 15:36-6Думаю год не имеет значения. Более значимо то что эта информация уже доступна из многих источников. Люди всегда будут учиться и кому то эта информация актуальна даже в этом году. Несмотря на все минусы этой статьи 19 человек посчитали нужным добавить её в закладки.
Не сказал бы я что часто вижу использование RGBA там где не нужна прозрачность. Так что существование этой функции наверно не столь очевидно для новичков.
100ml
26.01.2019 16:05+1Так же можно использовать не только rgba(), но и HEX значение.
Значение цвета в HEX ( для примера #548eaa): после 6 символов добавить ещё 2 в той же шестнадцатеричной системе, к примеру #548eaaa0.
Из минусов HEX в этой ситуации — не поддерживается IE.
Houston
Большое спасибо, что делитесь опытом, но в данном случае вопрос слишком тривиальный и его решение доступно по каждой ссылке на первой странице поиска по запросу, например, "css opaque background color".
Dim0v
Не то, чтобы это что-то меняло, но все же немного позанудствую. Opaque — это НЕпрозрачный. Правильный ответ, конечно же, находится и по такому запросу, но вот сам запрос задаёт прямо противоположный вопрос. Запросы со словами opacity, alpha, transparent или semi-transparent вместо opaque работают не хуже.
Houston
Хорошо, хабр как раз для этого) Спасибо.