[css] CSS : 배경색의 배경 이미지

Program / 글쓴이

이 패널을 선택하면 (클릭 한 경우) 파란색으로 표시된 패널이 있습니다. 또한 .png해당 패널에 작은 기호 ( 이미지)를 추가 하여 선택한 패널이 이전에 이미 선택되었음을 나타냅니다.

따라서 사용자가 예를 들어 10 개의 패널을보고 4 개의 패널에이 작은 부호가 있으면 이전에 이미 해당 패널을 클릭 한 것을 알고 있습니다. 이것은 지금까지 잘 작동합니다. 문제는 작은 기호를 표시 할 수 없으며 동시에 패널을 파란색으로 만들 수 있다는 것입니다.

CSS로 패널을 파란색으로 설정 background: #6DB3F2;하고으로 배경 이미지를 설정했습니다 background-image: url('images/checked.png'). 그러나 배경색이 이미지 위에 있으므로 기호를 볼 수 없습니다.

그러므로 z-index배경색과 배경 이미지에 대해 es 를 설정할 수 있습니까?

답변

각각에 대해 전체 속성 이름을 사용해야합니다.

background-color: #6DB3F2;
background-image: url('images/checked.png');

또는 배경 속기를 사용하여 한 줄에 모두 지정할 수 있습니다.

background: url('images/checked.png'), #6DB3F2;

답변

나 에게이 솔루션은 효과가 없었습니다.

background-color: #6DB3F2;
background-image: url('images/checked.png');

그러나 대신 다른 방법으로 작동했습니다.

<div class="block">
<span>
...
</span>
</div>

CSS :

.block{
  background-image: url('img.jpg') no-repeat;
  position: relative;
}

.block::before{
  background-color: rgba(0, 0, 0, 0.37);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
}

답변

백그라운드에서 검은 그림자 생성을 원하면 다음을 사용할 수 있습니다.

background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");

답변

MDN 웹 문서 를 기반 으로을background 제외하고 속기 속성 또는 개별 속성을 사용하여 여러 배경을 설정할 수 있습니다 background-color. 귀하의 경우 다음 linear-gradient과 같이 사용하여 트릭을 수행 할 수 있습니다 .

background-image: url('images/checked.png'), linear-gradient(to right, #6DB3F2, #6DB3F2);

매개 변수의 첫 번째 항목 (이미지)이 맨 위에 표시됩니다. 두 번째 항목 (컬러 배경)이 첫 번째 항목 아래에 놓입니다. 다른 속성을 개별적으로 설정할 수도 있습니다. 예를 들어 이미지 크기와 위치를 설정합니다.

background-size: 30px 30px;
background-position: bottom right;
background-repeat: no-repeat;

이 방법의 장점은 다른 경우에 쉽게 구현할 수 있다는 것입니다. 예를 들어 특정 불투명도로 이미지를 오버레이하는 파란색을 만들려고합니다.

background-image: linear-gradient(to right, rgba(109, 179, 242, .6), rgba(109, 179, 242, .6)), url('images/checked.png');
background-size: cover, contain;
background-position: center, right bottom;
background-repeat: no-repeat, no-repeat;

개별 속성 매개 변수가 각각 설정됩니다. 이미지가 색상 오버레이 아래에 배치되므로 해당 속성 매개 변수도 색상 오버레이 매개 변수 뒤에 배치됩니다.

답변

정말 흥미로운 문제는 아직 보지 못했습니다. 이 코드는 나를 위해 잘 작동합니다. 크롬과 IE9에서 테스트했습니다.

<html>
<head>
<style>
body{
    background-image: url('img.jpg');
    background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>

답변

짧은 트릭을 사용하여 이미지와 색상을 모두 다음과 같이 사용할 수 있습니다.

body {
     background:#000 url('images/checked.png');
 }

답변

이것은 실제로 저에게 효과적입니다.

background-color: #6DB3F2;
background-image: url('images/checked.png');

단색 그림자를 드롭하고 배경 이미지를 설정할 수도 있습니다.

background-image: url('images/checked.png');
box-shadow: inset 0 0 100% #6DB3F2;

첫 번째 옵션이 어떤 이유로 작동하지 않고 상자 그림자를 사용하지 않으려면 추가 HTML없이 이미지에 항상 의사 요소를 사용할 수 있습니다.

.btn{
    position: relative;
    background-color: #6DB3F2;
}
.btn:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:0;
    background-image: url('images/checked.png');
}