1. 혼합 혼합 모드 속성 소개 2. 혼합 혼합 모드의 공통 속성 값 3. 혼합 혼합 모드 속성 적용 1. 응용 효과 2. 관련 코드 4. 텍스트 지능형 적응 배경 1. 기존 스타일 2. 믹스 추가 3. 구현 코드
CSS의 [ mix-blend-mode 속성 ]은 요소의 콘텐츠가 요소의 바로 상위 요소 및 요소의 배경 콘텐츠 와 혼합되는 방법을 설명합니다.
요소의 배경과 전경 사이의 혼합 모드를 설정하는 데 사용됩니다. 배경 이미지 속성과 함께 사용하여 다양한 시각적 효과를 만들 수 있습니다.
| 일련번호 | 속성 값 | 블렌딩 모드 및 지침 |
|---|---|---|
| 1 | 혼합 혼합 모드: 일반 ; | 일반: 이 속성은 혼합을 적용하지 않습니다. |
| 2 | 혼합 혼합 모드: 곱하기 ; | 곱하기: 요소에 배경이 곱해지고 배경 색상이 대체됩니다. 결과 색상은 항상 배경만큼 어둡습니다. |
| 3 | 혼합 혼합 모드: 오버레이 ; | 오버레이: 하드 라이트 혼합 모드와 달리 배경색을 기준으로 콘텐츠를 곱하거나 마스크합니다. |
| 4 | 혼합 혼합 모드: 화면 ; | 화면: 배경과 내용을 곱한 후 결과를 보완합니다. 이렇게 하면 내용이 배경색보다 밝아집니다. |
| 5 | 혼합 혼합 모드: 어둡게 ; | Darken ; 콘텐츠가 어두워지면 배경이 콘텐츠로 대체되고 그렇지 않으면 그대로 유지됩니다. |
| 6 | 혼합 혼합 모드: 밝게 ; | 밝게: 배경이 더 밝은 콘텐츠로 대체됩니다. |
| 7 | 혼합 혼합 모드: 색상 회피 ; | 색상 밝게: 이 속성은 콘텐츠의 색상을 반영하기 위해 배경색을 밝게 합니다. |
| 8 | 혼합 혼합 모드: 색상 굽기 ; | 색상 밝게: 콘텐츠의 자연스러운 색상을 반영하기 위해 배경을 어둡게 합니다. |
| 9 | 혼합 혼합 모드: 하드라이트 ; | 하드 라이트: 콘텐츠의 색상에 따라 이 속성은 콘텐츠를 필터링하거나 곱합니다. |
| 10 | 혼합 혼합 모드: 부드러운 빛 ; | 소프트 라이트: 콘텐츠의 색상에 따라 콘텐츠가 어두워지거나 밝아집니다. |
| 11 | 혼합 혼합 모드: 차이 ; | 차이점 : 가장 밝은 색상에서 두 색상 중 더 어두운 색상을 뺍니다. |
| 12 | 혼합 혼합 모드: 제외 ; | 제외 : 차이와 유사하지만 대비가 낮습니다. |
| 13 | 혼합 혼합 모드: 색조 ; | 색조 : 콘텐츠의 색조와 배경의 채도 및 밝기를 결합하여 색상을 생성합니다. |
| 14 | 혼합 혼합 모드: 채도 ; | 채도 : 콘텐츠의 채도와 배경의 색상 및 밝기를 통해 색상을 만듭니다. |
| 15 | 혼합 혼합 모드: 색상 ; | 색상 혼합: 콘텐츠의 색조와 채도, 배경의 밝기를 기반으로 색상을 만듭니다. |
| 16 | 혼합 혼합 모드: 광도 ; | 광도 : 콘텐츠의 광도와 배경의 색상, 채도를 기준으로 색상을 생성합니다. 이는 색상 속성과 반대입니다. |
Normal : 이 속성은 블렌딩을 적용하지 않습니다.multiply : 요소에 배경을 곱하고 배경 색상을 대체합니다. 결과 색상은 항상 background.screen만큼 어둡습니다. 배경과 내용을 곱한 다음 결과를 보완합니다. 결과는 배경색보다 밝습니다.overlay : 배경색에 따라 콘텐츠를 곱하거나 스크린합니다. 이는 하드 라이트 블렌드 모드의 반대입니다. darken : 배경이 콘텐츠가 있는 콘텐츠로 대체됩니다. 더 어둡고, 그렇지 않으면 원래대로 남습니다.lighten : 배경이 내용이 더 밝은 내용으로 대체됩니다.color-dodge: 이 속성은 내용의 색상을 반영하기 위해 배경색을 밝게 합니다.color-burn : 배경을 어둡게 합니다. 콘텐츠의 자연스러운 색상을 반영합니다.하드-라이트: 콘텐츠의 색상에 따라 이 속성이 스크린되거나 곱해집니다.소프트-라이트: 콘텐츠의 색상에 따라 어둡거나 밝아집니다.차이: 더 어두운 부분을 뺍니다. 둘 중 가장 밝은 색상의 색상.제외 : 차이와 유사하지만 대비가 더 낮습니다.hue : 콘텐츠의 색조와 배경의 채도 및 광도가 결합된 색상을 생성합니다.채도 : 다음과 결합된 콘텐츠의 채도를 사용하여 색상을 생성합니다. 배경의 색상과 광도.color : 콘텐츠의 색상과 채도, 배경의 광도로 색상을 생성합니다.luminosity : 콘텐츠의 광도와 색상과 광도로 색상을 생성합니다. 배경의 채도는 색상 속성의 반대입니다.
효과 표시 클릭
mix-blend-mode 속성 적용
<!DOCTYPE HTML>
<html lang="ko">
<머리>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>mix-blend-mode 속성 적용</title>
<스타일>
* {
여백: 0;
패딩: 0;
}
.컨테이너 {
/* 변수 정의 */
--mix-blend-mode: 정상;
위치: 상대;
너비: 300px;
높이: 400px;
여백: 60px;
패딩: 20px;
상자 그림자: 0 0 6px 1px #999;
테두리 반경: 6px;
캐럿 색상: 투명;
}
h3,
h4 {
여백 하단: 10px;
}
.info-박스 {
너비: 100%;
높이: 24px;
줄 높이: 24px;
}
.원 {
위치: 절대;
너비: 200px;
높이: 200px;
테두리 반경: 50%;
혼합 혼합 모드: var(--mix-blend-mode);
}
.red-box {
왼쪽: 70px;
상단: 160px;
배경색: 빨간색;
}
.green-box {
왼쪽: 30px;
상단: 220px;
배경색: 연한 녹색;
}
.blue-box {
왼쪽: 110px;
상단: 220px;
배경색: 파란색;
}
</style>
</head>
<본문>
<div 클래스="컨테이너">
<h3>mix-blend-mode 속성 적용</h3>
<h4 class="value-box"></h4>
<div class="info-box"></div>
<div class="원형 빨간색 상자"></div>
<div class="circle green-box"></div>
<div class="원형 파란색 상자"></div>
</div>
</body>
<스크립트>
// 요소 가져오기 var 컨테이너 = document.querySelector(".container");
var valueBox = document.querySelector(".value-box");
var infoBox = document.querySelector(".info-box");
//혼합 모드 속성의 값 목록 및 설명;
var 값 = [
{
아이디: 1,
이름: "보통",
값: "정상",
info: "이 속성은 블렌딩을 적용하지 않습니다."
},
{
아이디: 2,
이름: "곱하기",
값: "곱하기",
info: "요소에 배경이 곱해지고 배경 색상이 대체됩니다. 결과 색상은 항상 배경만큼 어둡습니다."
},
{
아이디: 3,
이름: "오버레이",
값: "오버레이",
info: "배경색을 기준으로 내용을 곱하거나 마스크합니다. 이는 하드 라이트 혼합 모드와 반대입니다."
},
{
아이디: 4,
이름: "스크린",
값: "화면",
info: "배경과 내용을 곱한 다음 결과를 보완합니다. 이렇게 하면 내용이 배경색보다 밝아집니다."
},
{
아이디: 5,
이름: "다크",
값: "어둡게",
info: "콘텐츠가 어두워지면 배경이 콘텐츠로 대체되고 그렇지 않으면 그대로 유지됩니다."
},
{
아이디: 6,
이름: "밝게 하다",
값: "밝게 하다",
info: "배경이 더 밝은 콘텐츠로 대체됩니다."
},
{
아이디: 7,
name: "색이 바래짐",
값: "색상 닷지",
info: "이 속성은 콘텐츠의 색상을 반영하기 위해 배경색을 밝게 합니다."
},
{
아이디: 8,
name: "색이 바래짐",
값: "색상 번짐",
info: "콘텐츠의 자연스러운 색상을 반영하기 위해 배경을 어둡게 합니다."
},
{
아이디: 9,
이름: "하드 라이트",
값: "하드라이트",
info: "이 속성은 색상을 기준으로 콘텐츠를 필터링하거나 곱합니다."
},
{
아이디: 10,
이름: "소프트 라이트",
값: "부드러운 빛",
info: "콘텐츠의 색상에 따라 콘텐츠가 어두워지거나 밝아집니다."
},
{
아이디: 11,
이름: "차이점",
값: "차이",
info: "가장 밝은 색상에서 두 색상 중 더 어두운 색상을 뺍니다."
}, {
아이디: 12,
이름: "제외",
값: "제외",
info: "차이와 비슷하지만 대비가 더 낮습니다."
},
{
아이디: 13,
이름: "색조",
값: "색조",
info: "콘텐츠의 색조와 배경의 채도 및 밝기를 결합하여 색상을 만듭니다."
},
{
아이디: 14,
이름: "채도",
값: "채도",
info: "콘텐츠의 채도와 배경의 색조 및 밝기를 사용하여 색상을 만듭니다."
},
{
아이디: 15,
이름: "색상 혼합",
값: "색상",
info: "콘텐츠의 색조와 채도, 배경의 밝기를 기반으로 색상을 만듭니다."
},
{
아이디: 16,
이름: "밝기",
값: "광도",
info: "콘텐츠의 광도와 배경의 색조 및 채도를 기반으로 색상을 만듭니다. 이는 색상 속성과 반대입니다."
}
]
변경모드();
//믹스 블렌드 모드 변경
함수 변경 모드() {
인덱스 = 0으로 놔두세요;
modAttr(색인);
타이머Id = setInterval(() => {
if (색인 >= 값.길이) {
ClearInterval(timerId);
반품;
}
인덱스++;
모드 속성(색인)
}, 3000)
}
함수 modAttr(색인) {
//mix-blend-mode의 속성 값을 설정합니다.
valueBox.innerHTML = `혼합-블렌드 모드: ${values[index].value};`;
infoBox.innerHTML = `${values[index].name}(${values[index].value}): ${values[index].info}`
}
</script>
</html>그림 옆에 텍스트를 표시해야 하는 경우가 많습니다. 텍스트와 그림의 색상이 가까우면 가독성이 심각하게 저하됩니다.
텍스트가 배경에 자동으로 적응되도록 하려면 어떻게 해야 합니까?
mix-blend-mode 속성을 사용하면 텍스트와 배경의 색상 혼합을 설정하여 텍스트가 배경에 적응하는 효과를 얻을 수 있습니다.
일부 이미지에서는 텍스트 색상이 흰색입니다.
.grid-item > h3 {
색상: rgb(255, 255, 255);
...
}
mix-blend-mode 속성을 Difference 로 설정하십시오 .
텍스트 색상의 초기 값은 흰색이지만 상위 요소의 배경에 해당하는 각 픽셀의 색상 값 으로 차이를 계산하여 새로운 색상 값을 얻습니다.
텍스트 색상 값 - 배경 색상 값 = 혼합 픽셀 값(각 픽셀)
예: 텍스트 색상(255, 255, 255), 배경 색상(255, 255, 255), 계산된 값(0, 0, 0), 검정색으로 표시됩니다.
.grid-item>h3 {
색상: rgb(255, 255, 255);
/* 블렌딩 모드 설정 - 차이 계산 */
혼합 혼합 모드: 차이;
...
}참고: 여기의 차이점 혼합 모드는 텍스트에 적용됩니다.
<!DOCTYPE HTML>
<html lang="ko">
<머리>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>텍스트가 배경에 지능적으로 적응합니다</title>
<스타일>
* {
여백: 0;
패딩: 0;
}
.컨테이너 {
디스플레이: 플렉스;
폭: 100vw;
높이: 60vh;
내용 정당화: 센터;
항목 정렬: 중앙;
}
.grid-컨테이너 {
디스플레이: 그리드;
그리드 템플릿 열: 400px 400px 400px;
그리드 템플릿 행: 200px 200px;
간격: 10px;
}
.grid-항목 {
background-repeat: 반복하지 않음;
배경 크기: 표지;
테두리 반경: 6px;
상자 그림자: 0 0 6px 1px #999;
}
.grid-item>h3 {
색상: rgb(255, 255, 255);
글꼴 크기: 36px;
/* 블렌딩 모드 설정 - 차이 계산 */
혼합 혼합 모드: 차이;
}
.grid-item:nth-child(1) {
/* 배경 이미지: url("D:\test\zyl-img\bg_1.jpg") */
배경색: 빨간색
}
.grid-item:nth-child(2) {
/* 배경 이미지: url("D:\test\zyl-img\bg_2.jpg") */
배경색: 보라색;
}
.grid-item:nth-child(3) {
/* 배경 이미지: url("D:\test\zyl-img\bg_3.jpg") */
배경색: 노란색;
}
.grid-item:nth-child(4) {
/* 배경 이미지: url("D:\test\zyl-img\bg_4.jpg") */
배경색: 녹색;
}
.grid-item:nth-child(5) {
/* 배경 이미지: url("D:\test\zyl-img\bg_5.jpg") */
배경색: 청록색;
}
.grid-item:nth-child(6) {
/* 배경 이미지: url("D:\test\zyl-img\bg_6.jpg") */
배경색: 파란색;
}
</style>
</head>
<본문>
<div 클래스="컨테이너">
<div 클래스="그리드-컨테이너">
<div 클래스="그리드 항목">
<h3>mix-blend-mode 속성 적용</h3>
</div>
<div 클래스="그리드 항목">
<h3>mix-blend-mode 속성 적용</h3>
</div>
<div 클래스="그리드 항목">
<h3>mix-blend-mode 속성 적용</h3>
</div>
<div 클래스="그리드 항목">
<h3>mix-blend-mode 속성 적용</h3>
</div>
<div 클래스="그리드 항목">
<h3>mix-blend-mode 속성 적용</h3>
</div>
<div 클래스="그리드 항목">
<h3>mix-blend-mode 속성 적용</h3>
</div>
</div>
</div>
</body>
</html>이것으로 CSS의 mix-blend-mode 속성(요소의 혼합 모드 설정)에 대한 자세한 설명에 대한 기사를 마칩니다. CSS mix-blend-mode 속성에 대한 자세한 내용을 보려면 downcodes.com에서 이전 기사를 검색하거나 아래에서 관련 기사를 계속 찾아보세요. 앞으로도 downcodes.com을 지원해 주시기 바랍니다!