-i 将背景设置为黑色 -我设置图像并更改不透明度，以便它与背景融为一体。 - 试图在图像上方创建文本，但它不会显示。
这是网站的预览:
下面是我做的代码:)
我测试了另一张没有不透明度的图片，它起作用了，但是当我尝试减少它时它又消失了:( */
body {
background-color: black;
}
.container img {
position: absolute;
top: 430px;
left: 670px;
right: 0;
bottom: 0;
margin: auto;
width: 101%;
min-height: 50%;
}
.container {
display: inline-block;
opacity: 0.8;
position: relative;
top: -50%;
left: -50%;
width: 100%;
height: 100%;
color: red;
}
.mid-left h1 {
position: absolute;
left: 25px;
top: 10px;
}
.navbar {
text-align: center;
width: 100%;
overflow: hidden;
position: fixed;
bottom: 5px;
right: 0px;
background-color: black;
}
.navbar a {
text-decoration: none;
color: white;
font-family: "montserrat-extrabold", sans-serif;
font-size: 15px;
letter-spacing: 3px;
}
.navbar ul {
display: inline-block;
list-style: none;
padding: 10px;
margin: 20px;
}
.navbar li {
float: left;
}
.navbar li+li {
margin-left: 20px;
}
/*changing of color when hover*/
.navbar a:hover {
text-decoration: underline;
color: red;
transition: 0.6s;
}
/*add color to the selective link*/
.navbar a:active {
background-color: transparent;
}<!DOCTYPE html>
<html>
<head>
<title> R E S U M E</title>
<link rel="stylesheet" href="home.css">
<link rel="stylesheet" type="text/css" href="font.css">
<meta charset="utf-8">
</head>
<body>
<!-- <div id="bg">
<img src="Cover1.jpg" alt="">
</div>
-->
<div class="container">
<img src="Cover1.jpg" alt="Me">
<div class="mid-left">
<h1>----- Greetings!</h1>
</div>
</div>
<header class="flex flex-vertical-center">
<div class="navbar flex flex-horizontal-center">
<ul>
<li class="navitem"> <a href="home.html" class="active"> Home </a> </li>
<li class="navitem"> <a href="personal.html">Personal</a></li>
<li class="navitem"> <a href="education.html">Education</a></li>
<li class="navitem"> <a href="experience.html">Experience</a></li>
s
</ul>
</div>
</header>
</body>
</html>最佳答案
你没有看到 .mid-left因为
.container {
...
top: -50%;
left: -50%;
}
您必须使用这些值删除 top 和 left 。此外，我建议您使用 background-image: url('Cover1.jpg')在 .container并删除 <img src="Cover.jpg" alt="Me">
关于html - 在图像上方插入文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53025517/