이 패널을 선택하면 (클릭 한 경우) 파란색으로 표시된 패널이 있습니다. 또한 .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%;
}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;개별 속성 매개 변수가 각각 설정됩니다. 이미지가 색상 오버레이 아래에 배치되므로 해당 속성 매개 변수도 색상 오버레이 매개 변수 뒤에 배치됩니다.
이것은 실제로 저에게 효과적입니다.
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');
}다음은 백그라운드에서 아이콘으로 컬러 버튼의 스타일을 지정하는 방법입니다
색상에 "배경색"속성을 사용하고 이미지에 "배경"속성을 사용했습니다.
<style>
.btn {
display: inline-block;
line-height: 1em;
padding: .1em .3em .15em 2em
border-radius: .2em;
border: 1px solid #d8d8d8;
background-color: #cccccc;
}
.thumb-up {
background: url('/icons/thumb-up.png') no-repeat 3px center;
}
.thumb-down {
background: url('/icons/thumb-down.png') no-repeat 3px center;
}
</style>
<span class="btn thumb-up">Thumb up</span>
<span class="btn thumb-down">Thumb down</span><li style="background-color: #ffffff;"><a href="https://stackoverflow.com/<%=logo_marka_url%>"><img border="0" style="border-radius:5px;background: url(images/picture.jpg') 50% 50% no-repeat;width:150px;height:80px;" src="images/clearpixel.gif"/></a></li>
다른 Sample Box Center 이미지 및 배경색
1. 첫 번째 클리어 픽셀 수정 이미지 영역 2. 스타일 중심 이미지 영역 상자 3.li 배경 또는 div 컬러 스타일