CSS: 배경 색상의 배경 이미지
이 패널을 선택할 경우 파란색으로 표시한 패널이 있습니다(클릭).추가로, 나는 작은 표지판을 추가합니다 (.png선택한 패널이 이전에 이미 선택되었음을 나타냅니다.
사용자가 예를 들어 10개의 패널과 그 중 4개의 패널에 이 작은 기호가 있는 것을 본다면, 그는 이전에 이미 해당 패널을 클릭한 적이 있다는 것을 알고 있습니다.이 일은 아직까지는 괜찮습니다.문제는 이제 작은 표지판을 보여주면서 동시에 패널을 파란색으로 만들 수 없다는 것입니다.
나는 CSS로 패널을 파란색으로 설정했습니다.background: #6DB3F2;배경 이미지와 함께background-image: url('images/checked.png')하지만 배경색이 이미지 위에 있어서 표지판이 보이지 않는 것 같습니다.
따라서 설정이 가능합니까?z-index배경색과 배경 이미지를 위해?
다음 각 항목에 대해 전체 속성 이름을 사용해야 합니다.
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 Web Docs를 기반으로 속기를 사용하여 여러 배경을 설정할 수 있습니다.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:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");
다음과 같이 짧은 트릭을 사용하여 이미지와 색상을 모두 사용할 수도 있습니다.
body {
background:#000 url('images/checked.png');
}
정말 흥미로운 문제입니다, 아직 보지 못했습니다.이 코드는 나에게 잘 작동합니다. 크롬과 IE9에서 테스트했습니다.
<html>
<head>
<style>
body{
background-image: url('img.jpg');
background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>
다음 구문도 사용할 수 있습니다.
background: <background-color>
url('../assets/icons/my-icon.svg')
<background-position-x background-position-y>
<background-repeat>;
그것은 당신이 결합할 수 있게 해줍니다.background-color,background-image,background-position그리고.background-repeat특성.
예
background: #696969 url('../assets/icons/my-icon.svg') center center 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');
}
배경에 아이콘이 있는 컬러 버튼을 스타일링한 방법은 다음과 같습니다.
색상은 "background-color" 속성을 사용하고 이미지는 "background" 속성을 사용했습니다.
<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>
오른쪽(또는 왼쪽)에 아이콘을 표시해야 한다고 가정하면 가장 적합합니다.
.show-hide-button::after {
content:"";
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
background-size: 1em;
width: 1em;
height: 1em;
background-position: 0 2px;
margin-left: .5em;
}
.show-hide-button.shown::after {
background-image: url(img/eye.svg);
}
당신은 또한 할 수 있습니다.background-size: contain;하지만 그것은 대부분 같아야 합니다.background-position이미지에 따라 달라집니다.
그러면 호버에서 다른 상태를 쉽게 수행할 수 있습니다.
.show-hide-button.shown:hover::after {
background-image: url(img/eye-no.svg);
}
상자 그림자로 시도할 수 있습니다: 삽입
.second_info_block {
background: url('imageURL');
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.4);
}
<li style="background-color: #ffffff;"><a href="/<%=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>
기타 샘플 상자 중심 이미지 및 배경색
1. 첫 번째 클리어 픽셀 픽스 이미지 영역 2. 스타일 중앙 이미지 영역 상자 3.li 배경 또는 div 컬러 스타일
body
{
background-image:url('image/img2.jpg');
margin: 0px;
padding: 0px;
}
언급URL : https://stackoverflow.com/questions/8195215/css-background-image-on-background-color
'programing' 카테고리의 다른 글
| Powershell 함수에서 여러 항목을 반환하는 방법 (0) | 2023.08.12 |
|---|---|
| Git 분기 간 특정 폴더의 차이 (0) | 2023.08.12 |
| PowerShell에 관련 파일 포함 (0) | 2023.08.12 |
| 스프링 3.0.5에서 매개 변수 바인딩이 쉼표를 해석하지 못하도록 방지하는 방법은 무엇입니까? (0) | 2023.08.12 |
| 클래스 이름별로 요소 제거 (0) | 2023.08.12 |