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

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

제가 하려는 것은 두 가지 모두를 보여주는 것입니다.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이미지와 a를 쌓다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다음과 같은 속성:

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

와 색 는 " 다뒤쉼색코기다니록합드를상와음에표▁the▁the▁note▁after▁code▁and▁comma" 뒤에 기록합니다.no-repeat원하는 배경색을 설정합니다.

저는 이 유튜브 영상에서 이것을 발견했지만, 저는 어떤 방식으로든 그 채널이나 영상에 소속되어 있지 않습니다.

여기에 사용은예다입니다를 사용하는 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>

이미지의 절반을 투명하게 만들어 배경색이 보이도록 합니다.

그렇지 않으면 용기 div의 50%를 차지하는 다른 div를 추가하여 왼쪽 또는 오른쪽으로 띄우기만 하면 됩니다.그런 다음 이미지 또는 색상을 적용합니다.

도마뱀붙이는 이상한 벌레를 가지고 있습니다.background-color를해위를 .html를 .background-image의.body사실상 요소는 더 큰 z-index를 가지고 있고 당신은 신체의 특징을 볼 수 있어야 합니다.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;

언급URL : https://stackoverflow.com/questions/903659/why-cant-i-use-background-image-and-color-together