У меня есть вертикальная панель блоков / кнопок.
Я хочу сделать так что бы у них был общий фон, как это можно сделать?
Исходная картинка
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуТут банально используется background-attachment: fixed на картинках.
.image-fixed {
width: 200px;
height: 70px;
margin: 15px;
border: 5px solid black;
background-image: url(https://i.stack.imgur.com/kO1xf.jpg);
background-attachment: fixed;
background-size: 70%;
background-position: -8px 2px;
border-radius: 11px;
text-align: center;
font-size: 35px;
color: white;
}
#common {
background: blue;
}
<div id="common">
<div class="image-fixed">text</div>
<div class="image-fixed">text</div>
<div class="image-fixed">text</div>
content content content content <br/>
content content content content <br/>
content content content content <br/>
content content content content <br/>
content content content content <br/>
content content content content <br/>
content content content content <br/>
content content content content <br/>
content content content content <br/>
</div>
Недостаток тут очевиден - при скролле картинка остается на месте. Какие хаки применить, причем без использования Javascript, чтобы блок дивов двигался вместе с картинкой - я пока не знаю
.box {
background-color: #dddddd;
width: 50%;
padding: 15px;
margin: 0 auto;
}
.wrap {
background: url('https://i.stack.imgur.com/kO1xf.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.btn {
position: relative;
border: 1px solid black;
padding: 10px;
display: block;
margin-bottom: 10px;
color: #ffffff;
}
.btn::after {
position: absolute;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
content: '';
bottom: -11px;
left: -1px;
width: 100%;
height: 10px;
background-color: #dddddd;
}
<div class="box">
<div class="wrap">
<a href="" class="btn">Кнопка</a>
<a href="" class="btn">Кнопка</a>
<a href="" class="btn">Кнопка</a>
<a href="" class="btn">Кнопка</a>
</div>
</div>
Вот но на мой взгляд костыли
background-attachment: fixed;
для кнопок, наверное, подойдет...