У меня есть панель, которую я окрашивал в синий цвет, если эта панель выбрана (щелкнула по ней). Кроме того, я добавляю к этой панели небольшой знак (.png image), который указывает, что выбранная панель уже была выбрана раньше.
Итак, если пользователь видит, например, 10 панелей и 4 из них имеют этот небольшой знак, он знает, что он уже нажал на эти панели раньше. Пока эта работа прекрасна. Проблема в том, что я не могу отобразить маленький знак и сделать панель синей одновременно.
Я установил синюю панель с помощью css background: #6DB3F2; и фонового изображения с background-image: url('images/checked.png'). Но кажется, что цвет фона выше изображения, поэтому вы не можете видеть знак.
Можно ли установить z-index es для цвета фона и фонового изображения?
Вам нужно использовать полное имя свойства для каждого:
background-color: #6DB3F2;
background-image: url('images/checked.png');
Или вы можете использовать сокращенную копию фона и указать все в одной строке:
background: #6DB3F2 url('images/checked.png');
Для меня это решение не получилось:
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%;
}
И если вы хотите создать черную тень на заднем плане, вы можете использовать следующее:
background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");
действительно интересная проблема, ее еще не видели. этот код отлично работает для меня. протестировал его в Chrome и IE9
<html>
<head>
<style>
body{
background-image: url('img.jpg');
background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>
Вы также можете использовать короткий трюк, чтобы использовать изображение и цвет так:
body {
background:#000 url('images/checked.png');
}
Основываясь на 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;
Отдельные параметры свойств установлены соответственно. Поскольку изображение помещается под наложением цвета, его параметры свойств также помещаются после параметров наложения цвета.
Вот как я стилизовал свои цветные кнопки с иконкой на заднем плане
Я использовал свойство "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>
<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.li background или div color style
body
{
background-image:url('image/img2.jpg');
margin: 0px;
padding: 0px;
}