배경 이미지와 색상을 함께 사용할 수없는 이유는 무엇입니까?

내가 뭘하려고 모두를 보여주는 것입니다 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가 있으면 연한 파란색 색조가있는 그래프 용지가 생성됩니다. 쌓인 순서는 정신 모델과 반대로 작동 할 수 있으며 첫 번째 항목이 맨 위에옵니다.

모질라의 훌륭한 문서, 여기 :

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-imageand 를 사용하는 예입니다.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 % 차지하는 다른 div를 추가하고 왼쪽 또는 오른쪽으로 플로팅합니다. 그런 다음 이미지 나 색상을 적용하십시오.

게코는 설정 이상한 버그가 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;
}

자바 스크립트

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;