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

Question

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

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

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

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

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

571 8

css background-color background background-image

8 ответов:

Comments

Ничего не найдено.

dodger · Accepted Answer · 2011-11-19 18:05:37

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

Francisc Aknai · Accepted Answer · 2014-07-25 00:57:00

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

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

Risa__B · Accepted Answer · 2018-01-15 19:12:53

и если вы хотите создать черную тень в фоновом режиме, вы можете использовать следующее:
background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");

Ramzi Kahil · Accepted Answer · 2011-11-19 18:07:04

действительно интересная проблема, еще не видел. этот код отлично работает для меня. протестировал его в chrome и IE9
<html>
<head>
<style>
body{
    background-image: url('img.jpg');
    background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>

Kesar Sisodiya · Accepted Answer · 2014-08-16 23:50:11

вы также можете использовать короткий трюк, чтобы использовать изображения и цвет такой :-
body {
     background:#000 url('images/checked.png');
 }

Luki B. Subekti · Accepted Answer · 2017-12-24 23:16:43

на основе 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;
параметры отдельных свойств устанавливаются соответственно. Поскольку изображение помещается под наложение цвета, его параметры свойств также помещаются после параметров наложения цвета.

alpc · Accepted Answer · 2014-12-27 09:03:34

<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.Первый clearpixel исправить область изображения 2.поле область изображения центра стиля 3.li фон или div цвет стиль

Vikash pathak · Accepted Answer · 2013-08-13 14:02:24

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