Чтобы использовать маску с изображением в CSS правильно, так чтобы верхняя часть изображения была видимой, а нижняя затемнена, вы можете воспользоваться свойством `mask-image` и применить соответствующие стили. В вашем случае необходимо настроить маску так, чтобы она позволяла видеть верхнюю часть и затемняла нижнюю.
Пример кода может выглядеть следующим образом:
```html
<div class="hero">
<h1>Ваш заголовок</h1>
<p>Ваш текст</p>
</div>
```
```css
.hero {
position: relative;
height: 500px; /* Задайте высоту блока согласно вашему дизайну */
background: url('ваш-фоновый-цвет.jpg'); /* Фоновое изображение или цвет */
overflow: hidden;
-webkit-mask-image: url('hero-mask.png'); /* Для WebKit-браузеров */
mask-image: url('hero-mask.png'); /* Для остальных браузеров */
-webkit-mask-size: cover; /* Масштабируйте маску по размеру блока */
mask-size: cover; /* Масштабируйте маску по размеру блока */
-webkit-mask-position: top; /* Убедитесь, что маска установлена сверху */
mask-position: top; /* Убедитесь, что маска установлена сверху */
-webkit-mask-repeat: no-repeat; /* Не повторяйте маску */
mask-repeat: no-repeat; /* Не повторяйте маску */
}
/* Визуализируем затемнение нижней части */
.hero::after {
content: '';
position: absolute;
top: 100px; /* Настройте эту величину для глубины затемнения */
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5); /* Затемнение с использованием полупрозрачного фона */
z-index: 1; /* Убедитесь, что затемнение поверх контента */
}
```
### Пояснения:
1. **Маска (`mask-image` или `-webkit-mask-image`)**: Указывает на использованное изображение для маскирования. Убедитесь, что путь к изображению верный.
2. **Позиционирование маски**: Используйте `mask-position: top;` для размещения маски в верхней части. Это гарантирует, что верхняя часть изображения будет видна.
3. **Затемнение**: Используется псевдоэлемент `::after`, который создает слой поверх контента, чтобы затемнить нижнюю часть. Вы можете регулировать высоту затемнения, изменяя `top` свойство.
4. **Фоновый цвет или изображение**: Задайте фоновый цвет или изображение для блока `.hero`, чтобы вы могли видеть эффект маски.
Не забудьте протестировать этот код в разных браузерах, так как поддержка свойств маски может различаться.