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

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

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

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

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

118 голосов | спросил mkn 19 62011vEurope/Moscow11bEurope/MoscowSat, 19 Nov 2011 19:58:23 +0400 2011, 19:58:23

7 ответов


0

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

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

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

background: #6DB3F2 url('images/checked.png');
ответил dodger 19 62011vEurope/Moscow11bEurope/MoscowSat, 19 Nov 2011 20:05:37 +0400 2011, 20:05:37
0

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

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%;
}
ответил Francisc Aknai 25 J000000Friday14 2014, 01:57:00
0
  

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

background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");
ответил Risa__B 15 Jpm1000000pmMon, 15 Jan 2018 20:12:53 +030018 2018, 20:12:53
0

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

body {
     background:#000 url('images/checked.png');
 }
ответил Kesar Sisodiya 17 AM000000120000001131 2014, 00:50:11
0

На основе веб-документов MDN вы установить несколько фонов, используя сокращенное свойство 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;

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

ответил Luki B. Subekti 25 MonEurope/Moscow2017-12-25T00:16:43+03:00Europe/Moscow12bEurope/MoscowMon, 25 Dec 2017 00:16:43 +0300 2017, 00:16:43
0

<li style="background-color: #ffffff;"><a href="/<%=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.style 3.ли фоновый стиль или стиль цвета

ответил alpc 27 SatEurope/Moscow2014-12-27T10:03:34+03:00Europe/Moscow12bEurope/MoscowSat, 27 Dec 2014 10:03:34 +0300 2014, 10:03:34
0
body 
{
background-image:url('image/img2.jpg');
margin: 0px;
 padding: 0px;
}
ответил Vikash pathak 13 PM00000030000002431 2013, 15:02:24

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132