TEL:400-8793-956
当前位置:程序、服务器

谁能建议我如何减少背景图像的厚度

提问者: 近期获赞: 浏览人数: 发布时间:2021-08-30 09:00:33

 问:我正在尝试建立一个简单的网站。我有一个背景图片,但它似乎太厚了,上面的文字无法正常显示。你能建议如何减少背景图像的不透明度。这是我的代码

 
<!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 元素包裹的所有子元素的不透明度。
上一篇: “我的第一个网页简介”上传图片不起作用
下一篇: 异常 NSUnknownKeyexception