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

Question

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

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

Answer 1

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

Вы устанавливаете стили 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;

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

Answer 2

Чтобы подкрасить изображение, вы можете использовать CSS3 background для укладки изображений и 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! Я опубликую обновление, когда узнаю почему, так как это должно быть.

Answer 3

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

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

Answer 4

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

Answer 5

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

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

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

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

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

Answer 6

Вот пример использования 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>

Answer 7

Привет всем, я попробовал другой способ объединить 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();
}

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

Answer 8

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

Answer 9

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

Gecko Bug

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

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

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

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

Answer 10

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

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