Чому я не можу використовувати фонове зображення та кольори разом?

Що я намагаюся зробити - це показати і те, 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для складання зображень та 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% більше контейнера, і пливіть його вліво або вправо. Потім нанесіть на нього або зображення, або колір.

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

Привіт усім, я спробував інший спосіб поєднання фонового зображення та фонового кольору разом:

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;