CSS: фоновое изображение на цвет фона

169

У меня есть панель, которую я покрасил в синий цвет, если эта панель выбирается (щелкнул по ней) Кроме того, я добавляю небольшой значок ( .pngизображение) на эту панель, который указывает, что выбранная панель уже была выбрана ранее.

Поэтому, если пользователь видит, например, 10 панелей, и у 4 из них есть этот небольшой знак, он знает, что он уже нажимал на эти панели раньше. Пока это нормально работает. Проблема в том, что теперь я не могу отобразить маленький значок и одновременно сделать панель синей.

Я установил синюю панель с CSS background: #6DB3F2;и фоновое изображение с background-image: url('images/checked.png'). Но кажется, что цвет фона выше изображения, поэтому вы не можете видеть знак.

Возможно ли установить z-indexцвет фона и фонового изображения?

— MKN
источник

290

Вам необходимо использовать полное имя свойства для каждого:

background-color: #6DB3F2;
background-image: url('images/checked.png');

Или вы можете использовать сокращение фона и указать все это в одной строке:

background: url('images/checked.png'), #6DB3F2;

— ловкач
источник

7

1-й метод не работает для меня. 2-й, сокращенный метод работает отлично.

— Стив Бриз

1

Небезопасное значение стиля

— Nexeuz

@Nexeuz, почему вы считаете этот синтаксис стиля небезопасным Nexeuz?

— веб-женщина

31

Для меня это решение не сработало:

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%;
}

— Франциск Акнай
источник

2

Спасибо за код Франциск !! По его словам, объединение цвета фона и изображения не решило проблему и для меня. С этой помощью и небольшими изменениями в моем коде мне удалось решить проблему.

— Микель

17

И если вы хотите создать черную тень на заднем плане, вы можете использовать следующее:

background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");

— Risa__B
источник

5

На основе MDN Web Docs вы можете установить несколько фоновых изображений, используя сокращенное backgroundили индивидуальное свойство, за исключением background-color. В вашем случае, вы можете сделать трюк, используя linear-gradientэто:

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;

Параметры отдельных свойств устанавливаются соответственно. Поскольку изображение находится под наложением цвета, параметры его свойств также помещаются после параметров наложения цвета.

— Луки Б. Субэкти
источник

2

действительно интересная проблема, еще не видела. этот код работает нормально для меня. проверил это в хроме и IE9

<html>
<head>
<style>
body{
    background-image: url('img.jpg');
    background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>

— Рамзи Хахил
источник

2

Вы также можете использовать короткий трюк, чтобы использовать изображение и цвет, как это: -

body {
     background:#000 url('images/checked.png');
 }

— Кесар Сисодия
источник

1

Это на самом деле работает для меня:

background-color: #6DB3F2;
background-image: url('images/checked.png');

Вы также можете отбросить сплошную тень и установить фоновое изображение:

background-image: url('images/checked.png');
box-shadow: inset 0 0 100% #6DB3F2;

Если первый вариант по какой-то причине не работает и вы не хотите использовать тень от блока, вы всегда можете использовать псевдоэлемент для изображения без какого-либо дополнительного HTML:

.btn{
    position: relative;
    background-color: #6DB3F2;
}
.btn:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:0;
    background-image: url('images/checked.png');
}

— Фернан Гарсия де Суньига
источник

0

Вот как я стилизовал свои цветные кнопки с иконкой на заднем плане

Я использовал свойство "background-color" для цвета и свойство "background" для изображения.

  <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>

— Да начинающий
источник

-2

<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 стиль фона или цвета

— ALPC
источник

2

Встроенный CSS не подходит, если есть какой-либо другой разумный вариант.

— Джон Миттен

-10

body 
{
background-image:url('image/img2.jpg');
margin: 0px;
 padding: 0px;
}

— Викаш Патхак
источник