CSS 이미지 텍스트 투명성

먼저 배경이 반투명하고 내용이 불투명한 예를 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title>
<style type="text/css">
body{
background: #40ed90;
}
#container {
    color: #154BA0;
    background: #ff0000;
    filter: Alpha(Opacity=10, Style=0);
    opacity: 0.10;
    position: absolute;
    height: 200px;
    width:500px;
    z-index:20;
}
#text {
    position: absolute;
    height: 200px;
    width:500px;
    text-align:center;
    z-index:30;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="text">背景半透明但文字不透明</div>
</body>
</html>

댓글 : 사용 위 DIV + CSS 구현

아래에서는 배경이 투명하고 내용도 투명한 예를 보여줍니다. 🎜>아아앙

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> <style type="text/css"> div.background { width:500px; height:250px; background:url(https://img.php.cn//upload/image/870/504/597/1476339972616793.jpg ) repeat; border:2px solid black; } div.transbox { width:400px; height:180px; margin:30px 50px; background-color:#ffffff; border:1px solid black; opacity:0.6; filter:alpha(opacity=60); /* For IE8 and earlier */ } div.transbox p { margin:30px 40px; font-weight:bold; color:#000000; } </style> </head> <body> <div class="background"> <div class="transbox"> <p>这是一段文字</p> </div> </div> </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear