부모 div에서 불투명도를 설정하고 자식 div에 영향을 미치지 않는 방법은 무엇입니까?

부모 div에서 불투명도를 설정하고 자식 div에 영향을 미치지 않는 방법은 무엇입니까?

---

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

• CSS 14 답변 에서 부모로부터 자식 불투명도를 상속하고 싶지 않습니다.

안녕하세요 저는 Google에서 검색 중이지만 완벽한 대답을 찾을 수 없습니다.

부모 DIV에서 불투명도를 원하지만 하위 DIV는 원하지 않습니다.

예

HTML

<div class="parent">
<div class="child">
Hello I am child 
</div>
</div>

CSS

.parent{
background:url('../images/madu.jpg') no-repeat 0 0;
}
.child{
Color:black;
}

참고 :- 색상 이 아닌 배경 이미지 를 원합니다.Parent Div

---

의사 클래스 에서 배경 이미지 를 정의하면 좋을 수 있습니다 :after. 다음과 같이 작성하십시오.

.parent{
    width:300px;
    height:300px;
    position:relative;
    border:1px solid red;
}
.parent:after{
    content:'';
    background:url('http://www.dummyimage.com/300x300/000/fff&text=parent+image');
    width:300px;
    height:300px;
    position:absolute;
    top:0;
    left:0;
    opacity:0.5;
}
.child{
    background:yellow;
    position:relative;
    z-index:1;
}

이 바이올린 확인

---

나는 이것이 오래되었다는 것을 알고 있지만 다른 사람을 도울 것입니다.

<div style="background-color: rgba(255, 0, 0, 0.5)">child</div> 

어디에 rgba: 빨간색, 녹색, 파란색 및 a투명도를 나타냅니다.

---

의사 요소로 할 수 있습니다 : ( dabblet.com의 데모 )

마크 업 :

<div class="parent">
    <div class="child"> Hello I am child </div>
</div>

css :

.parent{
    position: relative;
}

.parent:before {
    z-index: -1;
    content: '';
    position: absolute;

    opacity: 0.2;
    width: 400px;
    height: 200px;
    background: url('http://img42.imageshack.us/img42/1893/96c75664f7e94f9198ad113.png') no-repeat 0 0; 
}

.child{
    Color:black;
}

---

Tom이 언급했듯이 background-color: rgba(229,229,229, 0.85)트릭을 할 수 있습니다. 부모 요소의 스타일에 배치하면 자식이 영향을받지 않습니다.

---

당신은 할 수 없습니다. 오늘날 CSS는이를 허용하지 않습니다.

논리적 렌더링 모델은 다음과 같습니다.

객체가 컨테이너 요소 인 경우 효과는 마스크의 각 픽셀 값이 인 마스크를 사용하여 컨테이너 요소의 내용이 현재 배경에 블렌딩 된 것과 같습니다.

참조 : CSS 투명성

The solution is to use a different element composition, usually using fixed or computed positions for what is today defined as a child : it may appear logically and visualy for the user as a child but the element doesn't need to be really a child in your code.

A solution using css : fiddle

.parent {
    width:500px;
    height:200px;    
    background-image:url('http://canop.org/blog/wp-content/uploads/2011/11/cropped-bandeau-cr%C3%AAte-011.jpg');
    opacity: 0.2;
}
.child {
    position: fixed;
    top:0;
}

Another solution with javascript : fiddle

---

I had the same problem and I fixed by setting transparent png image as background for the parent tag.

This is the 1px x 1px PNG Image that I have created with 60% Opacity of black background !

---

You can't do that, unless you take the child out of the parent and place it via positioning.

내가 알고 있고 실제로 작동하는 유일한 방법 은 부모의 배경에 투명 이미지 (투명도가있는 .png)를 사용하는 것입니다. 유일한 단점은 CSS를 통해 불투명도를 제어 할 수 없다는 것입니다.

참고 URL : https://stackoverflow.com/questions/10879045/how-to-set-opacity-in-parent-div-and-not-affect-in-child-div