У меня есть изображение с надписью текстового поля в моем приложении.CSS для выцветшего текста фона
Я пытаюсь поиграть с размером выцветшего окна. Он слишком высок, но изменение высоты поля заголовка не работает, чтобы уменьшить высоту.
Может ли кто-нибудь увидеть, что нужно изменить, чтобы уменьшить высоту текстового поля?
Благодаря
.module {
background: url(glowcell.jpg);
background-attachment: fixed;
width: 100%;
min-height: 540px;
position: relative;
overflow: hidden;
margin: 0px;
}
.module > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.module > header::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 200%;
height: 200%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.module > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25)
}
.module > header > h1 {
margin: 0;
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 50px;
position: relative;
z-index: 1;
}
* {
box-sizing: border-box;
}
Пожалуйста, сделайте jsFiddle вместо публикации только вашего CSS. – Dai