티스토리 뷰
아래의 답변을 가져왔다. stackoverflow 에서 가져왔다. 제일 아래 링크
Nope, this cannot be done since opacity affects the whole element including its content and there's no way to alter this behavior. You can work around this with the two following methods.
Secondary div
Add another div element to the container to hold the background. This is the most cross-browser friendly method and will work even on IE6.
HTML
<div class="myDiv">
<div class="bg"></div>
Hi there
</div>
CSS
.myDiv {
position: relative;
z-index: 1;
}
.myDiv .bg {
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(test.jpg) center center;
opacity: .4;
width: 100%;
height: 100%;
}
:before and ::before pseudo-element
Another trick is to use the CSS 2.1 :before or CSS 3 ::before pseudo-elements. :before pseudo-element is supported in IE from version 8, while the ::before pseudo-element is not supported at all. This will hopefully be rectified in version 10.
HTML
<div class="myDiv">
Hi there
</div>
CSS
.myDiv {
position: relative;
z-index: 1;
}
.myDiv:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(test.jpg) center center;
opacity: .4;
}
Additional notes
Due to the behavior of z-index you will have to set a z-index for the container as well as a negative z-index for the background image.
Test cases
See test case on jsFiddle:
'기록' 카테고리의 다른 글
데이터베이스 결과값 어디서 만드는 게 좋은가 (0) | 2022.03.05 |
---|---|
Cross Site에 관련된 내용이 잘 정리된 슬라이드 (0) | 2022.02.01 |
Redmine : Redmine Ubuntu 20.04 설치 시 mysql2 오류 (0) | 2022.01.19 |
크롬 : Custom Confirm 만들기 - Remove alert(), confirm(), and prompt for cross origin iframes 이슈 (0) | 2022.01.17 |
Spring - XML Schema-based configuration (0) | 2022.01.11 |
- Total
- Today
- Yesterday
- 도커 개발환경 참고
- AWS ARN 구조
- Immuability에 관한 설명
- 자바스크립트 멀티 비동기 함수 호출 참고
- WSDL 참고
- SOAP 컨슈머 참고
- MySql dump 사용법
- AWS Lambda with Addon
- NFC 드라이버 linux 설치
- electron IPC
- mifare classic 강의
- go module 관련 상세한 정보
- C 메모리 찍어보기
- C++ Addon 마이그레이션
- JAX WS Header 관련 stackoverflow
- SOAP Custom Header 설정 참고
- SOAP Custom Header
- SOAP BindingProvider
- dispatcher 사용하여 설정
- vagrant kvm으로 사용하기
- git fork, pull request to the …
- vagrant libvirt bridge network
- python, js의 async, await의 차이
- go JSON struct 생성
- Netflix Kinesis 활용 분석
- docker credential problem
- private subnet에서 outbound IP 확…
- 안드로이드 coroutine
- kotlin with, apply, also 등
- 안드로이드 초기로딩이 안되는 경우
- navigation 데이터 보내기
- 레이스 컨디션 navController
- raylib