我是編碼新手，但我的理解是替代文本通常是隱藏的？但是，替代文字一直顯示在我的螢屏頂部？我希望它使背景接觸頂部，但替代文本位于頁面頂部，我不知道如何隱藏它。有人可以看看我的代碼并告訴我我做錯了什么嗎？謝謝！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Personal Homepage</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
<script src="https://kit.fontawesome.com/012219d900.js" crossorigin="anonymous"></script>
<style>
.text-box{
background-color: transparent;
color: #FFF;
margin: 20px;
padding: 20px;
}
.sub-header{
height: 50vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(assets/about-sub.jpg);
background-position: center;
background-size: cover;
text-align: center;
color: #fff;
}
</style>
<img src="C:\Users\amand\Desktop\persona homepage\assets\"about-sub.jpg" alt="girl in kimono">
</head>
<body>
<section class="sub-header">
<nav>
<a href="index.html">AMANDA YEE</a>
<div class="nav-links" id="navLinks">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li><a href="about.html">ABOUT</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="CV.html">CV</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<h1>ABOUT</h1>
</section>
<!--about content-->
<section class="about-me">
<div class="row">
<div class="about-col">
<h1>This is me.</h1>
<p>My name is Amanda and I am a graphic and aspiring UX/UI designer based in New York. My designs operate in a space of cultural contrast all while centering around delight, empathy, and social awareness. I am fascinated with the beautiful intersection of design and culture when it comes to communicating and connecting with others; I use these interconnected interests to craft thoughtful experiences and designs through the power of storytelling.</p>
</div>
<div class="about-col">
<img src="assets/about.jpg" alt="girl smiling">
</div>
</div>
</section>
<!--Footer-->
<section class="footer">
<div class="icons">
<a href="https://www.linkedin.com/in/amanda-zi-yee/"> <i class="fa fa-linkedin-square"></i></a>
<a href="https://www.instagram.com/yu.zixin/"><i class="fa fa-instagram"></i></a>
<a href="mailto:[email protected]"><i class="fa fa-envelope-o"></i></a>
</div>
</section>
<!--Javascript for Toggle Menu-->
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
</body>
</html>uj5u.com熱心網友回復：
ALT 文本僅在您的影像無法加載時出現。只需確保您的相關影像的相對路徑是否正確
uj5u.com熱心網友回復：
.sidebar { 高度：100%; 寬度：0；位置：固定；z-索引：1；頂部：0；左：0；背景色：#11cdd4；溢位-x：隱藏；過渡：0.5s；填充頂部：60px；} .sidebar a { padding: 8px 8px 8px 32px; 文字裝飾：無；字體大小：25px；顏色：#818181；顯示：塊；過渡：0.3s；}
.sidebar a:hover { 顏色：#30e3cb; }
.sidebar .closebtn { 位置：絕對；頂部：0；右：25px；字體大小：36px；左邊距：50px；}
.openbtn { 字體大小：20px; 游標：指標；背景色：#11cdd4；白顏色; 填充：10px 15px；邊界：無；}
.openbtn:hover { 背景色:#30e3cb; } .open{ font-family:sans-serif; 字體粗細：粗體；字體大小：25px；顏色：#11cdd4；}
? 打開側邊欄 × 關于畫廊簡歷聯系方式
function openNav() { document.getElementById("mySidebar").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; } function closeNav() { document.getElementById("mySidebar").style.width = "0"; document.getElementById("main").style.marginLeft="0"; }
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/329290.html