Arka plan resmini ve rengini neden birlikte kullanamıyorum?

Ne yapmaya çalışıyorum hem göstermektir background-colorve background-imageSesimin yarısı böylece, divsağ gölge arka plan görüntüsü kapsayacak, ve diğer sol kısım arka plan rengini kapsayacaktır.

Ama kullandığımda background-imagerenk kayboluyor.

Bir öğe için arka plan olarak hem renk hem de görüntü kullanmak mükemmel bir şekilde mümkündür.

background-colorVe background-imagestillerini ayarlarsınız . Görüntü öğeden daha küçükse, background-positionstili sağa yerleştirmek için kullanmanız ve background-repeatstili kullanmakta olduğunuz arka planı tekrarlamasını ve kaplamasını önlemek için stili kullanmanız gerekir :

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

Veya bileşik stili kullanarak background:

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

Her backgroundikisini ayrı ayrı ayarlamak için bileşik stili kullanırsanız, yalnızca sonuncusu kullanılır, bu da rengin görünmemesinin olası nedenlerinden biridir:

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

Arka plan görüntüsünü öğenin yalnızca bir bölümünü kapsayacak şekilde özel olarak sınırlamanın bir yolu yoktur, bu nedenle arka plan renginin görünür olması için görüntünün öğeden daha küçük olduğundan veya saydam alanlara sahip olduğundan emin olmanız gerekir.

Bir görüntüyü renklendirmek için görüntüleri backgroundyığınlamak için CSS3'ü ve a linear-gradient. Aşağıdaki örnekte, linear-gradientgerçek gradyanı olmayan bir a kullanıyorum . Tarayıcı degradeleri görüntü olarak ele alır (aslında bir bitmap oluşturduğunu ve üzerine bindirdiğini düşünüyorum) ve bu nedenle aslında birden fazla görüntü yığınlıyor.

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

Eğer png vardı, açık mavi renk tonu ile bir grafik kağıdı verecektir. İstifleme sırasının, ilk öğe üstte olacak şekilde zihinsel modelinize ters yönde çalışabileceğini unutmayın.

Mozilla'dan mükemmel belgeler, burada:

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

Degradeleri oluşturmak için araç:

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

Not - IE11'de çalışmaz! Nedenini bulduğumdan beri bir güncelleme yayınlayacağım.

kullanım

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

Ve bu cevaba eklemek için görüntünün kendisinin şeffaf bir arka plana sahip olduğundan emin olun.

İşte background-imageve background-colorbirlikte kullanma örneği :

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

Aslında bir arka plan rengini bir arka plan görüntüsü ile kullanmanın bir yolu vardır. Bu durumda, arka plan kısmı beyaz / saydam yerine belirtilen renkle doldurulur.

Bunu başarmak için backgroundözelliği şu şekilde ayarlamanız gerekir :

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

Sonra virgül ve renk kodunu not edin no-repeat; bu istediğiniz arka plan rengini ayarlar.

Bunu bu YouTube videosunda keşfettim , ancak hiçbir şekilde o kanala veya videoya bağlı değilim.

Görüntünün yarısını saydam hale getirin, böylece arka plan rengi içinden görünecektir.

Else sadece konteyner div% 50 kadar alarak başka bir div ekleyin ve sola veya sağa yüzer. Ardından görüntüyü veya rengi uygulayın.

Gecko ayarı garip hata vardır background-coloriçin htmlselektör örtbas edecek background-imageolsa vücut elemanın bodyeleman etkisi daha büyük bir z-index vardır ve olmalıdır vücudun görebilecek background-imagebirlikte html background-colorbasit mantığa tamamen dayalı.

Gecko Bug

Aşağıdakilerden kaçının ...

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

Geçici Çözüm

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

Herkese merhaba, arka plan resmini ve arka plan rengini bir araya getirmenin başka bir yolunu denedim:

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

Lütfen sizin için işe yarayıp yaramadığını bana bildirin Teşekkürler

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