Question

-i将背景设置为黑色 -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>

Answer 1

您看不到.mid-left，因为

.container {
  ...
  top: -50%;
  left: -50%;
}

您必须删除这些值的顶部和左侧。此外，我建议您在background-image: url('Cover1.jpg')上使用.container并删除<img src="Cover.jpg" alt="Me">

在图片上方插入文字

1 个答案: