CSS 배경 불투명도

CSS 배경 불투명도

이 질문에는 이미 다음과 같은 답이 있습니다.

CSS를 사용하여 요소 배경의 불투명도를 줄이려면 어떻게 해야 합니까? (29개 답변)

마감됨6년 전에.

다음 코드와 유사한 것을 사용하고 있습니다.

<div style="opacity:0.4; background-image:url(...);">
    <div style="opacity:1.0;">
        Text
    </div>
</div>

이렇게 하면 배경의 불투명도가 0.4가 되고 텍스트의 불투명도가 100%가 될 것으로 예상했습니다.대신 둘 다 0.4의 불투명도를 갖습니다.

아이들은 불투명성을 물려받습니다.만약 그들이 그렇게 하지 않는다면 이상하고 불편할 것입니다.

배경 이미지에 반투명 PNG 파일을 사용하거나 배경 색상에 RGBa(알파의 경우 a) 색상을 사용할 수 있습니다.

예: 50% 색이 바랜 검은색 배경:

<div style="background-color:rgba(0, 0, 0, 0.5);">
   <div>
      Text added.
   </div>
</div>

유사 요소를 사용하거나 반투명 배경을 얻을 수 있으며 컨테이너 하나로 이 작업을 수행할 수 있습니다.다음과 같은 방법을 사용합니다.

<article>
  Text.
</article>

그런 다음 CSS를 적용합니다.

article {
  position: relative;
  z-index: 1;
}

article::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .4; 
  z-index: -1;
  background: url(path/to/your/image);
}

예:

body {
  background: red;
}

article {
  position: relative;
  z-index: 1;
}

article:before {
  content: " ";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100px;  
  opacity: .4; 
  z-index: -1;
  background: url(https://31.media.tumblr.com/8ec07e49f33088c2e32c158ca4262eb2/tumblr_n5wav6Tz4R1st5lhmo1_1280.jpg);
}

<article>
  Text.
</article>

참고: 다음을 조정해야 할 수도 있습니다.z-index가치.

다음 방법을 사용하여 문제를 해결할 수 있습니다.

1. CSS 알파 투명성 방법(Internet Explorer 8에서는 작동하지 않음):

   #div{background-color:rgba(255,0,0,0.5);}
   

2. 사용자의 선택에 따라 투명 PNG 이미지를 배경으로 사용합니다.

3. 다음 CSS 코드 스니펫을 사용하여 교차 브라우저 알파 투명 배경을 만듭니다.다음은 의 예입니다.#0000000.4% 불투명도

   .div {
       background:rgb(0,0,0);
       background: transparent\9;
       background:rgba(0,0,0,0.4);
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
       zoom: 1;
   }
   .div:nth-child(n) {
       filter: none;
   }
   

이 기술에 대한 자세한 내용은 온라인 CSS 생성기가 있는 이 항목을 참조하십시오.

저는 이런 일을 할 것입니다.

<div class="container">
  <div class="text">
    <p>text yay!</p>
  </div>
</div>

CSS:

.container {
    position: relative;
}

.container::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('/path/to/image.png');
    opacity: .4;
    content: "";
    z-index: -1;
}

그건 작동할 거야.이는 색상이 아닌 반투명 이미지 BTW가 필요하다고 가정합니다(단, rgba를 사용해야 함).또한 포토샵에서 미리 이미지의 불투명도만 변경할 수는 없다고 가정합니다.

Sass'를 사용할 수 있습니다. transparentize.

저는 그것이 가장 유용하고 사용하기 쉽다는 것을 알았습니다.

transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6) 

더 보기: #투명($color, $금액) » Sass::스크립트::값:색

.transbg{/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}

이는 내부 div가 내포된 div의 불투명도가 100%(불투명도가 40%)이기 때문입니다.

그것을 피하기 위해, 당신이 할 수 있는 몇 가지 일들이 있습니다.

다음과 같이 두 개의 개별 디브를 생성할 수 있습니다.

<div id="background"></div>
<div id="bContent"></div>

원하는 CSS 불투명도 및 배경에 대한 기타 속성을 설정하고 z-index 속성(z-index)을 사용하여 bContent div를 스타일화하고 배치합니다.이것을 사용하면 불투명도를 무시하지 않고 배경 디브의 역위상을 배치할 수 있습니다.

---

또 다른 옵션은 RGBa입니다.이를 통해 디브를 중첩하면서 디브 특이적 불투명도를 달성할 수 있습니다.

---

마지막 옵션은 원하는 이미지 편집기에서 원하는 색상의 반투명 .png 이미지를 만들고 배경 이미지 속성을 이미지의 URL로 설정하면 CSS를 사용하여 중첩된 div 구조의 기능과 구성을 잃을 염려가 없습니다.

전경의 너비와 높이를 배경과 동일하게 설정하거나 상단, 하단, 왼쪽 및 오른쪽 속성을 사용합니다.

<style>
    .foreground, .background {
        position: absolute;
    }
    .foreground {
        z-index: 1;
    }
    .background {
        background-image: url(your/image/here.jpg);
        opacity: 0.4;
    }
</style>

<div class="foreground"></div>
<div class="background"></div>

언급URL : https://stackoverflow.com/questions/10422949/css-background-opacity