- я установил фон на черном
-Я установил изображение и изменил непрозрачность, чтобы он сливался с фоном.
- попытался создать текст над изображением, но он не будет отображаться.
Вот предварительный просмотр сайта:
и следующий код, который я сделал:)
/ * К сожалению, текст "--- Привет" не может быть замечен в предварительном просмотре, и я попытался найти его, изменив цвета на тот случай, если он был просто неуместен, но это не так.
Я протестировал другую картинку без прозрачности, она работала, но когда я попытался уменьшить ее, она снова исчезает :( * /
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>