Как сверстать полупрозрачный блок на элементе при загрузке?

Question

[KirylLapouski]

Пишу декоратор для компонентов react, который будет отображать полосу загрузки. Как сделать весь дочерний блок немного серым. Тоесть чтобы блок казался неактивным. С position: relative, z-index и обёрточным div не получается - видно, что полупрозрачный фон применяется на родительский элемент, при этом дочерние элементы остаются над фоном родителя, а нужно чтобы дочерние элементы оказались под этим фоном.
Как исправить?

Comments

[Роман Александрович]

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

<View
				style={
					isFetch
						? {
								position: "absolute",
								width: widthScreen,
								height: heightScreen,
								backgroundColor: "rgba(0, 0, 0, 0.3)",
								zIndex: 666666,
						  }
						: null
				}
			>
				{isFetch !== undefined && isFetch === true ? (
					<View
						style={{
							width: widthScreen,
							height: heightScreen,
							backgroundColor: "rgba(0, 0, 0, 0.3)",
							justifyContent: "center",
							alignItems: "center",
						}}
					>
                        <ActivityIndicator size="large" color="#000000" />
					</View>
				) : null}
			</View>
		)

[KirylLapouski]

Роман Александрович, Да, вы правильно поняли, но так как вы написали не работает. Вот скрин. На нём видно, что стиль к блоку применён, а дочерние элементы НАД полупрозрачным слоем, а не ПОД ним.

Answer 1

[Антон Спирин]

Примерно так.