Как я могу подкрасить фоновое изображение с помощью CSS?
df = pd.DataFrame({'countries':['US','UK','Germany','China']})
countries = ['UK','China']
реализовать в:
df[df.countries.isin(countries)]
реализовать не так, как в странах покоя:
df[df.countries.isin([x for x in np.unique(df.countries) if x not in countries])]
5 ответов
Я думаю, вам нужно создать оверлейный элемент (потенциально div), который имеет искомый полупрозрачный фон. Что-то вроде:
.overlay {
z-index: 1;
height: 100%;
width: 100%;
position: fixed;
overflow: auto;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.7); /*can be anything, of course*/
}
И, конечно, небольшая демонстрация: маленькая ссылка .
Это будет свойство overlay https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingoverlay Но это черновик. Не надейся на это
Используйте background-blend-mode для простого оттенка
Вы можете использовать свойство background-blend-mode css:
.background-tint {
background-color: rgba(200,100,0,.5); // Tint color
background-blend-mode: multiply;
}
Поместить его на любой элемент с фоном изображение, и вы готовы идти.
Это свойство хорошо поддерживается в современных браузерах , НЕ , включая IE latest и Edge (состояние предварительного просмотра можно включить с флагом). Для не поддерживающих браузеров вы можете использовать polyfill .
Другие параметры
Использование плоского линейного градиента и наложения нескольких фонов
.background-tint {
background-image:
linear-gradient( rgba(0,0,0,.5), rgba(0,0,0,.5) ),
url('http://placehold.it/420')
}
Я думаю, что это наиболее широко используемая техника, но у нее есть и обратная сторона: она жестко закодирована, т. Е. Нельзя просто взять урок, прикрепить его к элементу и сделать оттенок.
Вы могли бы сделать это в менее или дерзкий миксин, что-то вроде:
less
.background-tint(@tint-color, @image-url) {
background-image:
linear-gradient( @tint-color, @tint-color ),
url( @image-url )
}
sass
@mixin background-tint($tint_color, $image_url) {
background-image:
linear-gradient( $tint_color, $tint_color ),
url( $image_url )
}
Использование прозрачного фона
.background-tint { position: relative; }
.background-tint::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
}
Этот метод имеет преимущество работы на большинство браузеров и это просто хороший класс, который вы добавляете к любому элементу. Недостатком является то, что если у вас есть что-то еще внутри этого элемента, вам придется обернуть его в div с некоторым видом позиционирования position: relative, который будет работать лучше всего.
Пример:
<div class="background-tint">
<div class="u-relative">Some text here</div>
</div>
.u-relative { position: relative; }
Попробуйте непрозрачность:
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
Это прекрасно сработало для меня:
https://css-tricks.com/tinted-images-multiple-backgrounds/
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* bottom, image */
url(image.jpg);
}
И строительство в другом ответе вы можете сделать это с существующими цветами менее похожими на:
linear-gradient(
fade(@brand-primary, 50%),
fade(@brand-primary, 50%)
),