이 글에서는 투명한 배경과 불투명한 텍스트를 구현하기 위한 CSS3 샘플 코드에 대한 관련 정보를 주로 소개합니다. 내용이 꽤 좋아서 참고용으로 올려보겠습니다.
최근 이미지에 반투명 배경의 텍스트를 표시해야 한다는 요구 사항이 발생했습니다. 효과는 다음과 같습니다.
Requirement.png
이 요구 사항을 본 후 첫 번째 반응은 CSS3 불투명도 설정을 사용하는 것이었습니다. 요소의 투명도.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>背景透明,文字也透明</title> <style> * { padding: 0; margin: 0; } .container { width: 600px; height: 400px; background: url('https://img1.dongqiudi.com/fastdfs3/M00/18/56/ChOxM1stHByARuNmAAGsJDKXtuM269.jpg') no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center 0; } .demo { position: absolute; width: 260px; height: 60px; top: 260px; line-height: 60px; text-align: center; background-color: black; opacity: 0.5; } .demo p { color: #FFF; font-size: 18px; font-weight: 600; } </style> </head> <body> <p class="container"> <p class="demo"> <p>2018世界杯已开幕:10天</p> </p> </p> </body> </html>
효과는 다음과 같습니다.
배경이 투명하고 텍스트도 투명합니다.png
이것은 요구 사항을 충족하는 것 같지만 불투명도를 설정한 후 완벽하지는 않습니다. 전체 요소가 반투명해져서 텍스트가 모호해 보이고 이 해결 방법은 권장되지 않습니다.
사실 투명한 CSS를 구현하는 유일한 방법은 불투명도를 설정하는 것입니다. 두 가지 다른 유형이 있습니다:
css3의 rgba(red, green, blue, alpha), alpha의 값은 rgba(255,255,255,0.8)
IE 독점 필터 필터와 같이 0에서 1입니다. Alpha(불투명도=x), x 값의 범위는 0에서 100입니다. 예를 들어 filter:Alpha(opacity=80)
여기서는 rgba:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>背景透明,文字不透明</title> <style> * { padding: 0; margin: 0; } .container { width: 600px; height: 400px; background: url('https://img1.dongqiudi.com/fastdfs3/M00/18/56/ChOxM1stHByARuNmAAGsJDKXtuM269.jpg') no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center 0; } .demo { position: absolute; width: 260px; height: 60px; top: 260px; line-height: 60px; text-align: center; background-color: rgba(0,0,0,0.5); } .demo p { color: #FFF; font-size: 18px; font-weight: 600; } </style> </head> <body> <p class="container"> <p class="demo"> <p>2018世界杯已开幕:10天</p> </p> </p> </body> </html>
설정 방법을 사용합니다. 효과는 다음과 같습니다.
배경은 투명하고 글자는 불투명.png
이렇게 설정하고 나면 글자가 훨씬 선명해 보입니다.
요약
사실 이 요구 사항을 충족하려면 이것이 유일한 생각 방법은 아닙니다. 두 개의 p를 동일한 위치에 사용할 수도 있습니다. 하나는 반투명 배경 p이고, 다른 하나는 텍스트 p입니다. 문제를 해결하려면 절대 위치 지정 또는 음수 여백을 작성하고 p를 빈 내용으로 표시해야 합니다. 이 방법은 다음 예와 같이 일부 시나리오에서 약간 복잡합니다. 실제 수요 시나리오에서는 여전히 특정 문제를 자세히 분석해야 합니다.
위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 권장 사항:
CSS3을 사용하여 일정한 간격으로 위로 텍스트 스크롤 구현
위 내용은 CSS3는 투명한 배경과 불투명한 텍스트의 효과를 얻습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!