CSS: фонове зображення на кольорі фону

169

У мене є панель, яку я пофарбував у синій колір, якщо ця панель обрана (натиснута на неї). Додатково я додаю .pngна цю панель невеликий знак ( зображення), який вказує на те, що вибрана панель вже була обрана раніше.

Отже, якщо користувач бачить, наприклад, 10 панелей і 4 з них мають цей маленький знак, він знає, що раніше вже натискав на ці панелі. Це добре працює до цих пір. Проблема полягає в тому, що я не можу відобразити малий знак і зробити панель синьою одночасно.

Я встановив панель синім кольором разом із css background: #6DB3F2;та фоновим зображенням background-image: url('images/checked.png'). Але здається, що колір фону знаходиться вище зображення, тому ви не можете побачити знак.

Чи можливо встановити z-indexes для кольору фону та фонового зображення?

— мкн
джерело

289

Потрібно використовувати повне ім’я власності для кожного:

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>

Інші кольорові зображення зображення та колір фону

1.Перша область чіткого пікселя виправити область зображення 2.стил області зображення середнього зображення 3.li фон або кольоровий стиль стилю

— alpc
джерело

2

Вбудований CSS не підходить, якщо є якийсь інший розумний варіант.

— Джон Міттен

-10

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

— Вікаш патхак
джерело