У меня есть группа, которую я окрашены в синий цвет, если эта панель выбрана (нажал на него). Кроме того, я добавить небольшое знак (.изображения PNG
) в этой панели, которая указывает на то, что некоторые группы уже выбрали раньше.
Поэтому, если пользователь видит, например, 10 панелей и 4 из них есть этот маленький знак, он знает, что он уже нажал на те панели перед. Эта работа до сих пор нормально. Проблема теперь, что я могу'т показать небольшой знак и сделать панель синий одновременно.
Я установил панель на синий с CSS фона: #6DB3F2; и фоновое изображение, а фон-изображения: URL-адреса('образы/проверено.ПНГ')`. Но мне кажется, что цвет фона над изображением, так что вы не можете видеть знак.
Поэтому его можно установить `Z-индекса х на цвет фона и фоновое изображение?
Вы должны использовать полное имя свойства для каждого:
background-color: #6DB3F2;
background-image: url('images/checked.png');
Или, вы можете использовать стенографию и указать все это в одну строку:
background: #6DB3F2 url('images/checked.png');
Для меня это решение не'т работать:
background-color: #6DB3F2;
background-image: url('images/checked.png');
Но вместо этого он работал в другую сторону:
<div class="block">
<span>
...
</span>
</div>
код CSS:
.block{
background-image: url('img.jpg') no-repeat;
position: relative;
}
.block::before{
background-color: rgba(0, 0, 0, 0.37);
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
}
Основываясь на веб-МДН документы Вы можете установить несколько фоновых помощью собирательного свойства " фон " или отдельные свойства, кроме фон
. В вашем случае, вы можете сделать трюк с использованием линейного градиента, как это:
background-image: url('images/checked.png'), linear-gradient(to right, #6DB3F2, #6DB3F2);
Первый элемент (изображения) в параметре будет положить сверху. Второй пункт (цвет фона) будет поставлена под первой. Вы также можете установить индивидуально другие свойства. Например, чтобы установить размер и позицию изображения.
background-size: 30px 30px;
background-position: bottom right;
background-repeat: no-repeat;
Преимуществом этого метода вы можете осуществить это легко для других случаев, например, вы хотите сделать синий цвет наложения изображения с определенной закрытостью.
background-image: linear-gradient(to right, rgba(109, 179, 242, .6), rgba(109, 179, 242, .6)), url('images/checked.png');
background-size: cover, contain;
background-position: center, right bottom;
background-repeat: no-repeat, no-repeat;
Индивидуальные параметры свойства устанавливаются соответственно. Потому что изображение положите под цвет оверлея, параметры недвижимости, также размещенные после цвет Параметры наложения.
очень интересные проблемы, не'т видел еще. этот код отлично работает для меня. проверял в Chrome и IE9
<html>
<head>
<style>
body{
background-image: url('img.jpg');
background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>
Вы также можете использовать короткий трюк, чтобы использовать изображения и цвет такой :-
body {
background:#000 url('images/checked.png');
}
Вот как меня величают мои цветные кнопки с иконкой в фоновом режиме
Я когда-то "фон" в собственность за цвет и "фон" в собственность для изображения.
<style>
.btn {
display: inline-block;
line-height: 1em;
padding: .1em .3em .15em 2em
border-radius: .2em;
border: 1px solid #d8d8d8;
background-color: #cccccc;
}
.thumb-up {
background: url('/icons/thumb-up.png') no-repeat 3px center;
}
.thumb-down {
background: url('/icons/thumb-down.png') no-repeat 3px center;
}
</style>
<span class="btn thumb-up">Thumb up</span>
<span class="btn thumb-down">Thumb down</span>
в <литий стиль=то"фон-цвет: #ffffff; и"><а href=" и/<%=logo_marka_url%>" и><ИМГ бордер=с"0" в стиле=на"границы-радиус:5 пикселей;фон: URL(адрес картинки/фото.форматы jpg') 50% 50% не повторять;ширина:150 пикселей;высота:80 пикселей; том, что" в src="и изображения/clearpixel.гиф-то"/></а></ли>
Другой образец центр изображения и цвет фона
1.Первый clearpixel исправить зону изображения 2.тип коробки площадь изображения центр 3.ли фон или div цвет стиль
body
{
background-image:url('image/img2.jpg');
margin: 0px;
padding: 0px;
}