【发布时间】：2023-01-08 03:54:14
【问题描述】：
从昨天开始，我已经花了好几个小时寻找答案，尽管我在 youtube 上看了很多教程，但我仍然没有解决问题的方法。 事情是这样的：我使用数组创建了 6 盒产品，我在 css 中设置了样式，因此它们会并排排成一排。然后我将背景图片放入标题中并设置背景样式。此时一切都按计划进行，但背景图片位于网站顶部，而装有产品的盒子被移到了底部（背景图片下方）。我试图让方框覆盖背景图像，这样它们就会覆盖背景但没有成功。然后我将“top:0;”值添加到“position”属性，它确实有效但现在所有 6 个框都位于站点的左上角，在同一位置，彼此重叠。
我的代码现在看起来很疯狂，因为我正试图让它工作。所以我提前道歉。你们有没有人建议如何使这个工作，所以 6 个装有产品的盒子会排成一排并覆盖背景图像？非常感谢！
这是我的代码：
<!DOCTYPE html>
<html lang="en">
<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>Eshop</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#" class=""></a>Main menu</li>
<li><a href="#" class=""></a>About us</li>
<li><a href="#" class=""></a>Contact</li>
<li><a href="#" class=""></a>Delivery</li>
<li><a href="#" class=""></a>FAQs</li>
</ul>
</nav>
</header>
<main>
<div class="container">
<?php
$TV = ["id" => "1", "name" => "TV", "img" => "<img src='img/TV.png'>", "price" => "1000 USD"];
$Computer = ["id" => "2", "name" => "Computer", "img" => "<img src='img/computer.png'>", "price" => "2000 USD"];
$Laptop = ["id" => "3", "name" => "Laptop", "img" => "<img src='img/laptop.png'>", "price" => "750 USD"];
$Camera = ["id" => "4", "name" => "Camera", "img" => "<img src='img/camera.png'>", "price" => "500 USD"];
$Phone = ["id" => "5", "name" => "Phone", "img" => "<img src='img/phone.png'>", "price" => "400 USD"];
$Smartwatch = ["id" => "6", "name" => "Smartwatch", "img" => "<img src='img/smartwatch.png'>", "price" => "300 USD"];
// echo "<img src='img/computer.jpg'>";
$catalog = array ($TV, $Computer, $Laptop, $Camera, $Phone, $Smartwatch);
// print_r($catalog);
foreach ($catalog as $item){
echo
"<div class='catalog-item'>
<div class='catalog-img'>
".$item ["img"]."
</div>
<div>
".$item ["name"]."
</div>
<div>
".$item ["price"]."
</div>
<div>
Buy
</div>
</div>";
// print_r($item);
// echo "<br>";
}
?>
</div>
</main>
<footer class="footer-page">
<div class="row">
<div class="social">
<p><a href="https://www.facebook.com/" target="_blank">Facebook</a></p>
<p><a href="https://www.instagram.com/" target="_blank">Instagram</a></p>
</div>
<div class="footer-text">
Copyright © 2023. All rights reserved.
</div>
</div>
</footer>
</body>
</html>
and here's my CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 1500px;
margin: 0 auto;
background-color: rgb(255, 255, 255);
}
/******* Header *******/
header {
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url("img/macbook.jpg");
background-size: cover;
height: 100vh;
background-attachment: fixed;
color: white;
position: relative;
overflow: hidden;
}
/******* Main *******/
.catalog-item {
width: 200px;
height: 300px;
background: linear-gradient(rgba(4, 65, 85, 0.5), #12688580);
margin: 20px;
font-size: 15px;
font-family: Arial;
font-weight: bold;
color: white;
box-sizing: border-box;
text-align: center;
margin-top: 20px;
box-shadow: 20px 10px 20px gray;
border-radius: 15px;
padding-bottom: 80px;
display: inline-block;
position: absolute; top:0;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
img {
max-width: 140px;
max-height: 200px;
object-fit: cover;
padding-top: 50px;
}
.catalog-img {
height: 100%;
}
/* .catalog-item:link,
.catalog-item:visited {
background: #ff7c32;
} */
.catalog-item:hover,
.catalog-item:active {
transition: background 0.5s;
background: #6dc4e080;
}
/******* Footer *******/
.footer-page {
background-color: #12688580;
margin-top: 30px;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
.social {
text-align: center;
margin: 10px 0px;
}
.social p {
display: inline;
margin-right: 20px;
}
.social p a:link,
.social p a:visited {
text-decoration: none;
color: #fff;
font-size: 22px;
}
.social p a:hover,
.social p a:active {
color: #08111480;
}
.footer-text {
text-align: center;
margin: 10px 0px;
font-size: 13px;
}
【问题讨论】：
-
你能用呈现的 HTML 替换问题中的 HTML / PHP（即：查看源代码，复制，粘贴） - 这是一个 CSS 问题而不是 PHP 所以最终的 HTML 标记将使尝试使用/解决更容易
标签： css background overlay