CSS 불투명도는 텍스트가 아닌 배경색만 가능합니까?

CSS 불투명도는 텍스트가 아닌 배경색만 가능합니까?

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

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

마감됨8년 전에.

할당할 수 있습니까?opacity의 재산.background의 특성div그 위에 있는 텍스트에 대해서만?

시도해 봤습니다.

background: #CCC;
opacity: 0.6;

하지만 불투명도가 바뀌지는 않습니다.

투명 배경을 사용하려는 것처럼 들립니다. 이 경우 다음 기능을 사용해 볼 수 있습니다.

rgba(R, G, B, A)

R(빨간색), G(녹색) 및 B(파란색) 중 하나일 수 있습니다.<integer>상심한<percentage>s, 여기서 숫자 255는 100%에 해당합니다.A(알파)는 다음과 같을 수 있습니다.<number>0과 1 사이, 또는 a<percentage>여기서 숫자 1은 100%(전체 불투명도)에 해당합니다.

RGBa 예

background: rgba(51, 170, 51, .1)    /*  10% opaque green */ 
background: rgba(51, 170, 51, .4)    /*  40% opaque green */ 
background: rgba(51, 170, 51, .7)    /*  70% opaque green */ 
background: rgba(51, 170, 51,  1)    /* full opaque green */ 

방법을 보여주는 작은 예rgba사용할 수 있습니다.

2018년 현재 거의 모든 브라우저가 구문을 지원합니다.

가장 쉬운 방법은 2개의 div(배경이 있는 1개, 텍스트가 있는 1개)를 사용하는 것입니다.

#container {
  position: relative;
  width: 300px;
  height: 200px;
}
#block {
  background: #CCC;
  filter: alpha(opacity=60);
  /* IE */
  -moz-opacity: 0.6;
  /* Mozilla */
  opacity: 0.6;
  /* CSS3 */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div id="container">
  <div id="block"></div>
  <div id="text">Test</div>
</div>

적은 수의 사용자에 한해:

RGBA를 사용하여 색상을 설정하는 것이 아니라 HEX를 사용하는 것을 좋아한다면 해결책이 있습니다.

다음과 같은 혼합물을 사용할 수 있습니다.

.transparentBackgroundColorMixin(@alpha,@color) {
  background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}

다음과 같이 사용합니다.

.myClass {
    .transparentBackgroundColorMixin(0.6,#FFFFFF);
}

실제로 기본 제공되는 축소 기능은 다음과 같습니다.

.myClass {
    background-color: fade(#FFFFFF, 50%);
}

Less 컴파일러를 사용하여 16진수 색상을 rgba로 변환하는 방법을 참조하십시오.

저도 같은 문제가 있었습니다.저는 100% 투명한 배경색을 원합니다.이 코드만 사용하면 됩니다. 저에게 매우 유용합니다.

rgba(54, 25, 25, .00004);

이 웹 페이지(연락처 양식 영역)의 왼쪽에서 예제를 볼 수 있습니다.

제 트릭은 색상으로 투명한 .png을 만들고 사용하는 것입니다.background:url().

모든 브라우저에서 작동합니다.

div {
    -khtml-opacity: .50;
    -moz-opacity: .50;
    -ms-filter: ”alpha(opacity=50)”;
    filter: alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity: .50;
}

투명성이 전체 컨테이너와 컨테이너 하위 컨테이너에 영향을 미치지 않도록 하려면 이 해결 방법을 확인하십시오.이를 달성하려면 부모가 상대적으로 위치가 확실한 자녀가 있어야 합니다. 자녀 요소에 영향을 미치지 않는 CSS 불투명도

"어린이"에게 영향을 미치지 않는 CSS 불투명도에서 작업 데모 확인.

이 스레드를 사용하는 사용자를 위해 방금 작성한 NotYoChild.js라는 스크립트가 있습니다. 이 스크립트는 이 문제를 자동으로 해결합니다.

http://www.impressivewebs.com/fixing-parent-child-opacity/

기본적으로 자식 요소와 부모 요소를 구분하지만 요소는 페이지의 동일한 실제 위치에 유지됩니다.

이를 위한 좋은 방법은 CSS 3을 실제로 사용하는 것입니다.

페이지 맨 위에 클래스(예: 수퍼바이저)의 div 너비를 만듭니다.

그런 다음 다음 CSS 속성을 설정합니다.

  .supersizer {
    background: url("http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    opacity: 0.5;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    top: 0;
  }

<div class="supersizer"></div>

3 가장가쉬해지 3 것다니만입 3 만드는 것입니다.divs나머지 2개를 포함할 하나, 배경이 투명한 하나, 내용이 있는 하나. 번째 div의 인 것으로 합니다.z-index그런 다음 투명 배경에 맞게 내용의 위치를 조정합니다.이렇게 하면 절대적인 포지셔닝에 문제가 발생하지 않습니다.

사용:

background:url("location of image"); // Use an image with opacity

이 방법은 모든 브라우저에서 작동합니다.

그럴수는 없어요.당신은 단지 그 배경이 되는 별도의 div를 가지고 있어야 합니다. 그래서 당신은 불투명도를 그것에만 적용할 수 있습니다.

최근에 이 작업을 시도했는데 이미 jQuery를 사용하고 있었기 때문에 다음 작업이 가장 덜 번거로웠습니다.

1. 두 개의 서로 다른 div를 만듭니다.그들은 형제자매가 될 것이고, 서로에게 포함되지 않을 것입니다.
2. 를 .text가 되기 배경색입니다.div 배경색입니다.
3. 하여 jQuery를 가져옵니다.text높이그, 의▁the▁it▁div다,▁div.background디브

이 모든 것을 플로트 같은 것으로만 할 수 있는 일종의 CSS 닌자 방법이 있을 것이라고 확신하지만, 저는 그것을 이해할 인내심이 없었습니다.

언급URL : https://stackoverflow.com/questions/5135019/css-opacity-only-to-background-color-not-the-text-on-it