CSS 불투명도는 텍스트가 아닌 배경색에만 적용 되나요?

CSS 불투명도는 텍스트가 아닌 배경색에만 적용 되나요? [복제]

---

이 질문에 이미 답변이 있습니다.

• CSS를 사용하여 텍스트 또는 이미지에 투명한 배경을 제공하려면 어떻게합니까? 28 답변

opacity속성을 텍스트가 아닌 only background속성에 할당 할 수 있습니까 div?

난 노력 했어:

background: #CCC;
opacity: 0.6;

그러나 이것은 불투명도를 변경하지 않습니다.

---

투명한 배경을 사용하고 싶은 것 같습니다.이 경우 rgba()함수를 사용해 볼 수 있습니다.

rgba(R, G, B, A)

R (빨간색), G (녹색) 및 B (파란색)는 <integer>s 또는 <percentage>s 일 수 있으며, 숫자 255는 100 %에 해당합니다. (알파)는 <number>0과 1 사이 또는 a <percentage>일 수 있으며 , 여기서 숫자 1은 100 % (완전 불투명도)에 해당합니다.

RGBa 예

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

사용 방법 을 보여주는 작은 예rgba 입니다.

2018 년 현재로, 거의 모든 브라우저가 지원하는 rgba구문을 .

---

가장 쉬운 방법은 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);
}

실제로 이것은 내장 된 Less 함수가 제공하는 것입니다.

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

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

---

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

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;
}

If you don't want transparency to affect the entire container and its children, check this workaround. You must have an absolutely positioned child with a relatively positioned parent to achieve this. CSS Opacity That Doesn’t Affect Child Elements

Check a working demo at CSS Opacity That Doesn't Affect "Children"

---

My trick is to create a transparent .png with the color and use background:url().

---

I had the same problem. I want a 100% transparent background color. Just use this code; it's worked great for me:

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

You can see examples on the left side on this web page (the contact form area).

---

A great way to do this would be to use CSS 3 indeed.

Create a div width a class - e.g. supersizer on top of your page:

Then set following CSS properties:

  .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>

---

For anyone coming across this thread, here's a script called thatsNotYoChild.js that I just wrote that solves this problem automatically:

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

Basically, it separates children from the parent element, but keeps the element in the same physical location on the page.

---

The easiest solution is to create 3 divs. One that will contain the other 2, the one with transparent background and the one with content. Make the first div's position relative and set the one with transparent background to negative z-index, then adjust the position of the content to fit over the transparent background. This way you won't have issues with absolute positioning.

---

Use:

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

This method will work in all browsers.

---

You can't. You have to have a separate div that is just that background, so that you can only apply the opacity to that.

I tried doing this recently, and since I was already using jQuery, I found the following to be the least hassle:

1. Create the two different divs. They'll be siblings, not contained in each other or anything.
2. Give the text div a solid background color, because that will be the JavaScript-less default.
3. Use jQuery to get the text div's height, and apply it to the background div.

I'm sure there's some kind of CSS ninja way to do all this with only floats or something, but I didn't have the patience to figure it out.

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