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

Ответ 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;

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

Ответ 2

использовать

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

Ответ 3

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

Ответ 4

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

Ответ 5

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

Ответ 6

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

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

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

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

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

Ответ 7

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

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

Ответ 8

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

Ошибка Gecko

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

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

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

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

Ответ 9

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

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

Ответ 10

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