问：我正在尝试建立一个简单的网站。我有一个背景图片，但它似乎太厚了，上面的文字无法正常显示。你能建议如何减少背景图像的不透明度。这是我的代码
<!DOCTYPE html> <html lang="en"> <head> <title> Vamsi Pavan Mahesh Gunturu </title> <meta charset="UTF-8">
<样式>
正文{
文本对齐：居中；
背景： url("http://imgsrv.legends1027.com/image/wlgz/UserFiles/Image/Wiki%20Corner/golden%20gate%20bridge.jpg");
背景尺寸：封面；
白颜色;
字体大小：22px；
}
输入{
边框：0;
填充：10px；
字体大小：18px；
}
input[type="submit"]{
颜色：白色；
背景：红色；
}
img{
宽度：165px;
高度：173px；
边框：5px纯白色；
边界半径：50%；
}
</style>
</head> <body> <img src="https://uploads.teamtreehouse.com/production/profile-photos/1140252/avatar_IMG_20140618_161850198.jpg">
< h1 > GVP Mahesh </ h1 >
< p >嗨，我是 Gunturu Vamsi Pavan Mahesh。我是一名程序员，我坚持编写干净的代码。打招呼！</ p >
< input type = "email" placeholder = "您的邮箱地址" >
< input type = "submit" >
</正文>
</html>
答：为了使背景变暗和减少一点，我有：
从正文中删除了背景图像。
将身体的背景更改为黑色。
创建了一个固定位置 100% 宽度和高度的新 div，称为背景。
添加 z-index -1 到背景 div 和 z-index: 1 到正文。这将确保背景位于页面主体包裹的元素后面，即使背景 div 是固定的。
我已将您的背景图像添加到背景 div 中。
然后为背景图像添加 50% 的不透明度，以便身体的黑色背景通过使其更暗更容易看到白色文本来显示。
（我为旧浏览器添加了向后兼容性以了解不透明度变化）。
从 body 中删除背景图像并创建一个新的背景 div 的原因是，如果您更改 body 元素的不透明度，它将降低由 body 元素包裹的所有子元素的不透明度。
