CSS를 사용하여 배경 이미지를 투명하게 만드는 방법

CSS에서 배경 이미지를 투명하게 만드는 데 필요한 속성은 opacity 속성인데, 텍스트가 있을 경우 텍스트가 투명해지지 않도록 요소를 분리해야 합니다.

배경 이미지를 투명하게 만드는 CSS의 속성은 불투명도 속성입니다. 하지만 이를 사용하여 텍스트가 포함된 콘텐츠를 만들면 텍스트 콘텐츠도 투명해집니다.

이제 배경 이미지만 투명하게 만드는 CSS를 작성해 보겠습니다.

먼저 HTML 코드를 살펴보겠습니다.

<div class="content">
    <div class="bg"></div>
    <p>蒲公英</p>
</div>

.bg는 외부에 "Dandelion"이라고 쓰여진 빈 div입니다.

즉, 위치 속성을 사용하여 이미지 위에 "민들레"를 배치하겠습니다. 구체적인 코드 예를 살펴보겠습니다.

먼저 .content에 상대 위치(위치: 상대;)를 지정합니다.

배경 투명도를 이해하기 쉽도록 먼저 검정색 배경을 줍니다

.content{
    width: 450px;
    height: 300px;
    background: #000;
    position: relative; /*相对位置*/
}
p{
    color: #fff;
    font-weight: bold;
    text-align: center;
}

효과는 다음과 같습니다.

다음으로 .bg를 설정하겠습니다

너비와 높이를 설정합니다 100%로 설정하고 위치 절대 위치를 왼쪽 상단(왼쪽:0; 위쪽: 0;)으로 설정합니다.

.bg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(img/pugongying.jpg);
    background-size: cover;
    opacity: 0.5;
}

효과는 다음과 같습니다.

사실 캐릭터는 투명한 이미지 아래에 있습니다.

그래서 절대 위치에 고정된 배경 이미지에 비해 p의 내용이 앞에 와야 합니다.

따라서 위치: 절대;를 지정하여 p에 스택 순서를 부여할 수도 있습니다. (위치: 절대;로 설명되어 있으므로 z-index를 사용하여 쌓인 순서를 조작할 수도 있습니다.)

마지막으로 텍스트를 중간 위치로 이동합니다

p{
    width: 100%;
    height: 1.5em;
    color: #fff;
    font-weight: bold;
    text-align: center;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
}

효과는 다음과 같습니다.

위 내용은 CSS를 사용하여 배경 이미지를 투명하게 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!