CSS3의 배경 레이어에 컬러 마스크를 추가하는 방법

(학습 영상 공유: css 영상 튜토리얼)

개발 중에 배경 레이어에 컬러 마스크를 추가해야 하는 프로젝트를 가끔 접하게 됩니다. 이제 배경 레이어에 컬러 마스크를 추가하는 방법을 구체적으로 정리하겠습니다. .

방법 1: 위치 지정을 통한 오버레이(레벨에 주의)

<div class="wrap1">
     <div class="inner"> </div>
</div>
.wrap1 {
    position: relative;
    width: 1200px;
    height: 400px;
    background: rgba(0, 0, 0, .5);
}

.wrap1 .inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url(ban8.jpg) no-repeat center center;
    background-size: cover;
    z-index: -1;
}

방법 2: 의사 클래스 요소를 통한 오버레이

<div class="wrap2"></div>
.wrap2 {
    position: relative;
    width: 1200px;
    height: 400px;
    background: url(ban8.jpg) no-repeat center center;
    background-size: cover;
}

.wrap2::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 2;
}

방법 3: CSS3 색상 오버레이 background-blend-mode: Multiply;(메인 비디오 스택 하단)

<div class="wrap3"></div>
.wrap3 {
    position: relative;
    width: 1200px;
    height: 400px;
    background: url(ban8.jpg) rgba(0, 0, 0, .5) no-repeat center center;
    background-blend-mode: multiply;
}

확장: 배경 흐림 및 색상 오버레이

.wrap4 {
    position: relative;
    width: 1200px;
    height: 400px;
    background: url(ban8.jpg) rgba(0, 0, 0, .5) no-repeat center center;
    background-blend-mode: multiply;
    filter: blur(2px);
    overflow: hidden;
}

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 CSS3의 배경 레이어에 컬러 마스크를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!