Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Полупрозрачный фоновой рисунок / 2 сообщений из 2, страница 1 из 1
11.12.2018, 09:22
    #39745753
Alibek B
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Полупрозрачный фоновой рисунок
Есть такой фрагмент:
Код: 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:26
    #39745757
Alibek B
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Полупрозрачный фоновой рисунок
Сейчас в качестве костыля я использую такое:
Код: 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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Полупрозрачный фоновой рисунок / 2 сообщений из 2, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 497ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1443940]:
 0ms
get settings:
 9ms
get forum list:
 13ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 154ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 42ms
get tp. blocked users:
 2ms
others: 255ms
total:  497ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]