Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Полупрозрачный фоновой рисунок  [new]
Alibek B.
Member

Откуда:
Сообщений: 3067
Есть такой фрагмент:
<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.
Как лучше описать этот класс?

Пока что самое лучшее, что у меня получилось, это такое:
.imgbg-digital::after {
	content: "";
	background-image: url(/img/bg/digital1.jpg);
	opacity: 0.5;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
}

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

Если сделать так:
.imgbg-digital {
	background-image: url(/img/bg/digital1.jpg);
	opacity: 0.5;
}

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

Можно сделать так:
.imgbg-digital {
	background-image: url(/img/bg/digital1.png);
}

и использовать digital1.png с нужной прозрачностью.
Тогда выглядит как надо, но этим неудобно пользоваться, да и файл получается большого размера.
11 дек 18, 09:22    [21759818]     Ответить | Цитировать Сообщить модератору
 Re: Полупрозрачный фоновой рисунок  [new]
Alibek B.
Member

Откуда:
Сообщений: 3067
Сейчас в качестве костыля я использую такое:
.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;
}

Но мне кажется, что должен быть более прямой способ.
11 дек 18, 09:26    [21759823]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить