<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css设置前景色透明</title>
</head>
<body>
<div class="box">我是一段文字</div>
</body>
</html>
二、没有加CSS的样式的效果显示：
三、加CSS样式的HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css设置前景色透明</title>
<style type="text/css">
.box {
width: 700px
height: 350px
margin: 0 auto
color: white
background-color: orange
/*color: orange这个方式从视觉上是透明了的，原理就是把文字颜色设置成与背景颜色一样 有局限性 双击看得到文字 */
color: transparent/*根上面方法一样 双击看得到文字 比上面好 推荐*/
}
</style>
</head>
<body>
<div class="box">我是一段文字</div>
</body>
</html>
在开发工具里面的截图：
四、加了CSS样式的效果图：
颜色值CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的最低值可以是 0（十六进制 00）。最高值是 255（十六进制 FF）。
十六进制值使用三个双位数来编写，并以 # 符号开头。
颜色
颜色 HEX
颜色 RGB
#000000rgb(0,0,0)
#FF0000rgb(255,0,0)
#00FF00rgb(0,255,0)
#0000FFrgb(0,0,255)
#FFFF00rgb(255,255,0)
#00FFFFrgb(0,255,255)
#FF00FFrgb(255,0,255)
#C0C0C0rgb(192,192,192)
#FFFFFFrgb(255,255,255)
亲自试一试
1600 万种不同的颜色
从 0 到 255 种红绿蓝值能够组合出总共超过一千六百万种不同的颜色（根据 256 x 256 x 256 计算）。
大多数现代的显示器都能显示出至少 16384 种不同的颜色。
如果您查看下面的表格，您将看到红光从 0 到 255 变化后的结果，此时绿光和蓝光为零。
如需查看红光由 0 向 255 变化的完整颜色混合器列表，请点击下面的十六进制值或 rgb 值。
<!DOCTYPE html><html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
<style>
div {
width: 300px
height: 300px
position: absolute
}
.f {
opacity: 0.6
filter: alpha(opacity=60)
text-align: center
background-color: gray
left: 0
top: 0
z-index: 99
}
input {
position: absolute
top: 100px
left: 60px
z-index: 100
}
.b {
background-color: red
top: 100px
left: 100px
}
</style>
</head>
<body>
<div>
<div class="f"></div>
<input type="text">
</div>
<div class="b"></div>
</body>
</html>至于后面图片的那个影子，那应该是图片的，不是css写出来的
