<style>
.user-114__avatar
{
background-image: url({{thumbnail}});
}
</style>
...
<!-- какие-то общие стили для аватара прописаны в классе user__avatar в файле css, а изменяемые прямо в HTML-->
<div class="user__avatar user-114__avatar">
</div><!-- какие-то общие стили для аватара прописаны в классе user__avatar в файле css, а изменяемые прямо в инлайн-атрибуте тега-->
<div class="user__avatar" style="background-image: url({{thumbnail}});">
</div><div class="photo__container">
<img src="photo.jpg"/>
<div class="photo__descr">
<p>Описание для фото</p>
</div>
</div>div.photo__descr
{
position: absolute;
}div.photo__container
{
position: relative;
}div.photo__descr
{
position: absolute;
bottom: 0;
}div.photo__descr
{
position: absolute;
bottom: 0;
max-height: 30%;
overflow-y: auto; /* можно еще добавить возможность прокручивать содержимое при вертикальном переполнении */
}div.photo__container
{
position: relative;
height: 600px;
}.table tr:last-child td
{
padding: 5px 0;
}@media (min-width: 768px)
{
/* селектор стилей для кнопки при наведении */
slider__button:hover
{
}
}/* устройство поддерживает hover*/
@media (hover: hover)
{
/* селектор стилей для кнопки при наведении */
slider__button:hover
{
}
}/*устройство не поддерживает hover */
@media (hover: none)
{
/* селектор стилей для кнопки при наведении - не нужен, либо должен переопределять свойства hover на нейтральное состояние */
/* slider__button:hover
{
}*/
}@media (hover), (min-width:0\0), (min--moz-device-pixel-ratio:0)
{
/* селектор стилей для кнопки при наведении */
slider__button:hover
{
}
}<div class="подложка">
<div class="элемент-подложки" style="background-color: transparent; transform: translate(0, -30px)">
</div>
</div>но откуда то берется плавная прокрутка до нужного места(возможно бутстрап накладывает анимацию)
html
{
scroll-behavior: smooth;
}да и в общем на слабых устройствах этот вариант, мне кажется, моргать будет, даже если ее убрать.
font-family: "PT Sans",Helvetica,Arial,sans-serif;<i class="fa-light fa-circle-info"></i> background: radial-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1)); /* второй параметр цвета нужно подобрать близкий к фоновому */.item-5
{
margin-top: auto !important;
}
.border
{
background-color: #0f3feb;
margin: 0 10px;
width: 100px;
height: 60px;
}<style>
div.container
{
display: flex;
flex-wrap: wrap;
width: 770px;
height: 90px;
background-color: green;
overflow: hidden;
}
div.container > div
{
width: 60px;
height: 25px;
background-color: #df1245;
text-align: center;
margin: 5px;
padding: 5px 0;
}
div.container > div:nth-child(n + 22) /*этим селекторам задаем свойство сортировки элементам, которые идут после кнопки "показать еще" если контейнер будет адаптивным, придется прописывать кучу вариантов nth-child */
{
order: 2;
}
div.container > label.more
{
display: block;
width: 130px;
height: 25px;
margin: 5px;
padding: 5px 0;
text-align: center;
order: 1; /* У кнопки стоит такой индекс сортировки чтобы оказаться между видимыми и невидимыми элементами */
background-color: #78d412;
}
div.container label.more span.less
{
display: none;
}
#show-more-state
{
display: none;
}
#show-more-state:checked ~ div.container
{
height: auto;
}
#show-more-state:checked ~ div.container label.more
{
order: 3;
margin-left: auto;
}
#show-more-state:checked ~ div.container label.more span.more
{
display: none;
}
#show-more-state:checked ~ div.container label.more span.less
{
display: initial;
}
</style>
<input id="show-more-state" type="checkbox"/> <!-- Этим чекбоксом запонимаем состояние кнопки, чтобы можно было оттолкнуться стилями от превдокласса :checked -->
<div class="container">
<label class="more" for="show-more-state"><span class="more">ПОКАЗАТЬ ЕЩЕ</span><span class="less">СВЕРНУТЬ</span></label>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
<div>ITEM</div>
</div>document.styleSheets[i].rules[j].selectorTextdocument.styleSheets[i].rules[j].style['имя_свойства'] = значение_свойства;</li><!-- тут символ переноса строки, вносит свою лепту как текстовая нода, имеющая небольшие, но геометрические размеры -->
<li class="modules-card layout">$('select').val(chooseItem).attr('selected', 'selected');$('select option[selected]').removeAttr('selected'); // удаление ранее установленного selected атрибута у одного из option
$('select option[value="' + chooseItem + '"]').attr('selected', 'selected'); // находим option с нужным value и устанавливаем атрибут selected