Почему я не могу использовать фоновое изображение и цвет вместе?

То, что я пытаюсь сделать, - это показать и то, background-colorи другое background-image, чтобы половина моей части divпокрывала правое теневое фоновое изображение, а другая левая часть - цвет фона.

Но когда я использую background-image, цвет исчезает.

Вполне возможно использовать цвет и изображение в качестве фона для элемента.

Вы устанавливаете background-colorи background-imageстили. Если изображение меньше, чем элемент, вам нужно использовать background-positionстиль, чтобы поместить его вправо, и чтобы он не повторялся и не покрывал весь фон, вы используете background-repeatстиль:

background-color: green;
background-image: url(images/shadow.gif);
background-position: right;
background-repeat: no-repeat;

Или используя составной стиль background:

background: green url(images/shadow.gif) right no-repeat;

Если вы используете комбинированный стиль backgroundдля установки обоих по отдельности, будет использоваться только последний, это одна из возможных причин, по которой ваш цвет не виден:

background: green; /* will be ignored */
background: url(images/shadow.gif) right no-repeat;

Нет никакого способа специально ограничить фоновое изображение, чтобы оно покрывало только часть элемента, поэтому вы должны убедиться, что изображение меньше, чем элемент, или что оно имеет какие-либо прозрачные области, чтобы цвет фона был видимым.

Чтобы подкрасить изображение, вы можете использовать CSS3 backgroundдля укладки изображений и a linear-gradient. В приведенном ниже примере я использую linear-gradientбез фактического градиента. Браузер обрабатывает градиенты как изображения (я думаю, что он на самом деле генерирует растровое изображение и накладывает его на него) и, таким образом, фактически накапливает несколько изображений.

background: linear-gradient(0deg, rgba(2,173,231,0.5), rgba(2,173,231,0.5)), url(images/mba-grid-5px-bg.png) repeat;

Даст миллиметровую бумагу с голубым оттенком, если у вас был png. Обратите внимание, что порядок наложения может работать в обратном направлении к вашей ментальной модели, причем первый элемент находится сверху.

Отличная документация Mozilla, здесь:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds

Инструмент для построения градиентов:

http://www.colorzilla.com/gradient-editor/

Примечание - не работает в IE11! Я опубликую обновление, когда узнаю почему, так как это должно быть.

использование

background:red url(../images/samle.jpg) no-repeat left top;

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

Вот пример использования background-imageи background-colorвместе:

.box {
  background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 15px, transparent 15px, transparent 30px);
  width: 100px;
  height: 100px;
  margin: 10px 0 0 10px;
  display: inline-block;
}

<div class="box" style="background-color:orange"></div>
<div class="box" style="background-color:green"></div>
<div class="box" style="background-color:blue"></div>

На самом деле есть способ использовать цвет фона с фоновым изображением. В этом случае фоновая часть будет заполнена указанным цветом вместо белого / прозрачного.

Для этого вам нужно установить backgroundсвойство следующим образом:

.bg-image-with-color {
    background: url("example.png") no-repeat, #ff0000;
}

Запишите запятую и код цвета после no-repeat; это устанавливает цвет фона, который вы хотите.

Я обнаружил это в этом видео на YouTube , однако я никоим образом не связан с этим каналом или видео.

Сделайте половину изображения прозрачной, чтобы сквозь него был виден цвет фона.

В противном случае просто добавьте еще один div, занимая 50% вверх контейнера div, и поместите его влево или вправо. Затем примените к нему либо изображение, либо цвет.

Gecko имеет странный баг , когда установив background-colorдля htmlселектора будет заметать background-imageкорпусной элемент , даже если bodyэлемент в действительности имеет больший Z-индекс , и вы должны быть в состоянии увидеть тела background-imageвместе сhtml background-color основано исключительно на простой логике.

Ошибка геккона

Избегайте следующего ...

html {background-color: #fff;}
body {background-image: url(example.png);}

Работа вокруг

body {background-color: #fff; background-image: url(example.png);}

Привет всем, я попробовал другой способ объединить background-image и background-color вместе:

HTML

<article><canvas id="color"></canvas></article>

CSS

article {
  height: 490px;
  background: url("Your IMAGE") no-repeat center cover;
  opacity:1;
} 

canvas{
  width: 100%; 
  height: 490px; 
  opacity: 0.9;
}

JAVASCRIPT

window.onload = init();

var canvas, ctx;

function init(){
  canvas = document.getElementeById('color'); 
  ctx = canvas.getContext('2d'); 
  ctx.save();  
  ctx.fillstyle = '#00833d'; 
  ctx.fillRect(0,0,490,490);ctx.restore();
}

Пожалуйста, дайте мне знать, если это сработало для вас Спасибо

background:url(directoryName/imageName.extention) bottom left no-repeat; 
background-color: red;