У меня есть панель, которую я покрасил в синий цвет, если эта панель выбирается (щелкнул по ней) Кроме того, я добавляю небольшой значок ( .png
изображение) на эту панель, который указывает, что выбранная панель уже была выбрана ранее.
Поэтому, если пользователь видит, например, 10 панелей, и у 4 из них есть этот небольшой знак, он знает, что он уже нажимал на эти панели раньше. Пока это нормально работает. Проблема в том, что теперь я не могу отобразить маленький значок и одновременно сделать панель синей.
Я установил синюю панель с CSS background: #6DB3F2;
и фоновое изображение с background-image: url('images/checked.png')
. Но кажется, что цвет фона выше изображения, поэтому вы не можете видеть знак.
Возможно ли установить z-index
цвет фона и фонового изображения?
Для меня это решение не сработало:
Но вместо этого это работает по-другому:
CSS:
источник
источник
На основе MDN Web Docs вы можете установить несколько фоновых изображений, используя сокращенное
background
или индивидуальное свойство, за исключениемbackground-color
. В вашем случае, вы можете сделать трюк, используяlinear-gradient
это:Первый элемент (изображение) в параметре будет помещен сверху. Второй элемент (цветной фон) будет помещен под первым. Вы также можете установить другие свойства индивидуально. Например, чтобы установить размер изображения и положение.
Преимущество этого метода в том, что вы можете легко реализовать его для других случаев, например, вы хотите, чтобы синий цвет накладывался на изображение с определенной непрозрачностью.
Параметры отдельных свойств устанавливаются соответственно. Поскольку изображение находится под наложением цвета, параметры его свойств также помещаются после параметров наложения цвета.
источник
действительно интересная проблема, еще не видела. этот код работает нормально для меня. проверил это в хроме и IE9
источник
Вы также можете использовать короткий трюк, чтобы использовать изображение и цвет, как это: -
источник
Это на самом деле работает для меня:
Вы также можете отбросить сплошную тень и установить фоновое изображение:
Если первый вариант по какой-то причине не работает и вы не хотите использовать тень от блока, вы всегда можете использовать псевдоэлемент для изображения без какого-либо дополнительного HTML:
источник
Вот как я стилизовал свои цветные кнопки с иконкой на заднем плане
Я использовал свойство "background-color" для цвета и свойство "background" для изображения.
источник
<li style="background-color: #ffffff;"><a href="https://stackoverflow.com/<%=logo_marka_url%>"><img border="0" style="border-radius:5px;background: url(images/picture.jpg') 50% 50% no-repeat;width:150px;height:80px;" src="images/clearpixel.gif"/></a></li>
Другие образцы Box Center Image и цвет фона
1.Первый четкий пиксель исправляет область изображения 2. поле стиля центра изображения области 3.li стиль фона или цвета
источник
источник