Dlaczego nie mogę jednocześnie używać obrazu tła i koloru?

To, co próbuję zrobić, to pokazać jedno background-colori drugie background-image, tak aby połowa mojego divobrazu zakryła prawy cień tła, a druga lewa część zakryła kolor tła.

Ale kiedy używam background-image, kolor znika.

Jest całkowicie możliwe użycie zarówno koloru, jak i obrazu jako tła dla elementu.

Ty ustawiasz background-colori background-imagestyle. Jeśli obraz jest mniejszy niż element, musisz użyć background-positionstylu, aby umieścić go po prawej stronie, i aby nie powtarzał się i nie obejmował całego tła, którego używasz background-repeat:

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

Lub używając stylu złożonego background:

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

Jeśli użyjesz stylu złożonego, backgroundaby ustawić oba oddzielnie, zostanie użyty tylko ostatni, to jeden z możliwych powodów, dla których twój kolor nie jest widoczny:

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

Nie ma sposobu, aby wyraźnie ograniczyć obraz tła tak, aby obejmował tylko część elementu, więc musisz upewnić się, że obraz jest mniejszy niż element lub że ma on przezroczyste obszary, aby kolor tła był widoczny.

Aby przyciemnić obraz, możesz użyć CSS3 backgrounddo układania obrazów i linear-gradient. W poniższym przykładzie używam linear-gradientbez rzeczywistego gradientu. Przeglądarka traktuje gradienty jako obrazy (myślę, że faktycznie generuje mapę bitową i nakłada ją), a zatem układa wiele obrazów w stos.

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

Otrzymasz papier milimetrowy z jasnoniebieskim odcieniem, jeśli miałeś png. Zauważ, że kolejność układania może działać odwrotnie do modelu mentalnego, przy czym pierwszy przedmiot będzie na wierzchu.

Doskonała dokumentacja Mozilli, tutaj:

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

Narzędzie do budowania gradientów:

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

Uwaga - nie działa w IE11! Opublikuję aktualizację, gdy dowiem się, dlaczego, skoro ma to zrobić.

posługiwać się

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

Aby dodać do tej odpowiedzi, upewnij się, że sam obraz ma przezroczyste tło.

Oto przykład użycia background-imagei background-colorrazem:

.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>

W rzeczywistości istnieje sposób na użycie koloru tła z obrazem tła. W takim przypadku część tła zostanie wypełniona określonym kolorem zamiast białego / przezroczystego.

Aby to osiągnąć, musisz ustawić backgroundwłaściwość w następujący sposób:

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

Zanotuj przecinek i kod koloru po no-repeat; to ustawia żądany kolor tła.

Odkryłem to w tym filmie na YouTube , jednak nie jestem w żaden sposób powiązany z tym kanałem lub filmem.

Ustaw przezroczystość połowy obrazu, aby widoczny był przez niego kolor tła.

W przeciwnym razie po prostu dodaj kolejny div, pobierając o 50% więcej div div i unoś go w lewo lub w prawo. Następnie zastosuj do niego obraz lub kolor.

Gecko ma dziwny błąd, ustawienie background-colordla htmlselektora będzie zatuszować background-imageelementu ciała, mimo że bodyelementem w efekcie ma większą z-index i powinny móc zobaczyć ciało jest background-imagewraz z html background-colorwyłącznie w oparciu o prostą logiką.

Bug Gecko

Unikaj następujących ...

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

Obejść

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

Witam wszystkich Próbowałem innego sposobu na połączenie obrazu tła i koloru tła:

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

Daj mi znać, czy to zadziałało. Dzięki

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