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

요소의 배경으로 색상과 이미지를 모두 사용할 수 있습니다.

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;

배경 이미지를 요소의 일부만 덮도록 특별히 제한 할 수있는 방법은 없으므로 이미지가 요소보다 작거나 배경 영역이 보이도록 투명한 영역이 있는지 확인해야합니다.

답변

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

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

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

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