Полупрозрачный фоновой рисунок / HTML, JavaScript, VBScript, CSS

ReSQL.ru

Мобильная версия Контакт Правила FAQ Помощь

Гость

Войти | Регистрация | Профиль | Очистить

Новые сообщения | Избранное

Форумы | Пользователи | Статистика | Мод. лог | Поиск

Цитировать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вложение:

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Полупрозрачный фоновой рисунок

2 сообщений из 2, страница 1 из 1

Полупрозрачный фоновой рисунок

#39745753

Alibek B

Участник

Сообщения: 3 881

Рейтинг: 0 / 0

Есть такой фрагмент:

Код: html

1.
2.
3.
4.
5.
6.
7.

<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-dark text-light">
	<div class="col-md-5 p-lg-5 mx-auto my-5">
		<h1><img src="/img/img-320.png"></h1>
		<p class="lead font-weight-normal">text text text</p>
		<a class="btn btn-outline-secondary">Скоро будет</a>
	</div>
</div>

Это темный блок со светлым текстом.
Хочу сделать так, чтобы в этом блоке был фоновой полупрозрачный рисунок (большого размера).
К внешнему div добавляю класс imgbg-digital.
Как лучше описать этот класс?

Пока что самое лучшее, что у меня получилось, это такое:

Код: css

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

.imgbg-digital::after {
	content: "";
	background-image: url(/img/bg/digital1.jpg);
	opacity: 0.5;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
}

Но в этом случае полупрозрачная картинка выводится поверх текста блока и это не очень хорошо.

Если сделать так:

Код: css

1.
2.
3.
4.

.imgbg-digital {
	background-image: url(/img/bg/digital1.jpg);
	opacity: 0.5;
}

то прозрачность применяется ко всему (фону, тексту), это не подходит.

Можно сделать так:

Код: css

1.
2.
3.

.imgbg-digital {
	background-image: url(/img/bg/digital1.png);
}

и использовать digital1.png с нужной прозрачностью.
Тогда выглядит как надо, но этим неудобно пользоваться, да и файл получается большого размера.

...

Рейтинг:

0 / 0

11.12.2018, 09:22

| Ответить | Цитировать | Написать

Полупрозрачный фоновой рисунок

#39745757

Alibek B

Участник

Сообщения: 3 881

Рейтинг: 0 / 0

Сейчас в качестве костыля я использую такое:

Код: css

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

.imgbg-digital::after {
	content: "";
	background-image: url(/img/bg/digital1.jpg);
	opacity: 0.25;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
}

.imgbg-digital > div {
	z-index: +1;
}

Но мне кажется, что должен быть более прямой способ.

...

Рейтинг:

0 / 0

11.12.2018, 09:26

| Ответить | Цитировать | Написать

2 сообщений из 2, страница 1 из 1

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Полупрозрачный фоновой рисунок

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=22&gotonew=1&tid=1443940]:	0ms
get settings:	9ms
get forum list:	11ms
check forum access:	3ms
check topic access:	3ms
track hit:	65ms
get topic data:	10ms
get first new msg:	6ms
get forum data:	2ms
get page messages:	41ms
get tp. blocked users:	1ms
others:	12ms

total:	163ms