【发布时间】：2022-01-26 13:02:38
【问题描述】：
:root {
--clr-primary: #0F052F;
--clr-secondary: #43D9B8;
--clr-light: #EEEEEE;
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-bold: 700;
}
* {
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
}
.wrapper {
width: 1440px;
margin: 0 auto;
padding: 0 100px;
}
/* Header - Navigation */
.desktop-nav {
display: flex;
justify-content: space-between;
align-items: center;
width: 1240px;
position: fixed;
z-index: 200;
top: 44px;
padding-right: 0;
}
.desktop-nav .menu-items {
display: flex;
list-style: none;
}
.desktop-nav .menu-items li {
margin: 0 27.5px;
}
.desktop-nav .menu-items li:nth-last-of-type(1) {
margin-right: 0;
}
.desktop-nav .menu-items li a {
text-decoration: none;
color: var(--clr-primary);
font-size: 16px;
font-weight: var(--fw-medium);
position: relative;
}
.desktop-nav .menu-items li a.active::after {
content: "";
position: absolute;
height: 3px;
width: 100%;
background-color: var(--clr-secondary);
left: 0;
bottom: -2px;
}
.desktop-nav .menu-items li a.btn {
color: white;
background-color: var(--clr-primary);
border-radius: 10px;
padding: 10px 23px;
}
/* BIA section */
.bia-container {
height: 100vh;
display: flex;
align-items: center;
justify-content: space-between;
}
.bia-container .left h1 {
font-size: 80px;
font-weight: var(--fw-bold);
margin: 60px 627px 18px 105px;
color: white;
line-height: 96px;
}
.bia-container .left p {
font-size: 18px;
font-weight: var(--fw-regular);
margin: 0px 632px 57px 105px;
color: white;
}
.bia-container .left a.btn {
text-decoration: none;
color: rgb(0, 0, 0);
border-radius: 10px;
padding: 10px 23px;
border: 1px solid #43D9B8;
margin: 0 0px 108px 105px;
color: white;
}
.bia-container .right {
padding-right: 105px;
}
/* Background header */
.bia-container .background {
position: absolute;
background: linear-gradient(135deg, #43D9B8 0%, #172443 64.58%, #0F052F 84.9%);
border-radius: 50px 50px 300px 50px;
width: 1240px;
height: 585px;
}
/* .bia-bg {
position: absolute;
z-index: -1;
} */
.bia-container .background .right {
position: absolute;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Google Fonts-->
<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=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<nav class="desktop-nav">
<div class="logo">
<a href="#">
<img src="Images/bia-logo.svg" alt="">
</div>
<ul class="menu-items">
<li>
<a href="#" class="active">Home</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#" class="btn">Neem contact op</a>
</li>
</ul>
</nav>
<!-- End of desktop navigation -->
<header class="bia-container">
<div class="background">
<div class="left">
<h1>Make data work for you</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut neque faucibus gravida viverra tristique. Morbi quis commodo interdum id risus. Vitae hac viverra dui quis lobortis parturient purus. Libero pharetra tortor.</p>
<a href="#" class="btn">Neem contact op</a>
</div>
<div class="right">
<img src="Images/header-analytics.svg" alt="">
</div>
</div>
<!-- <img class="bia-bg" src="Images/header-background.svg" alt=""> -->
<!-- End of header section -->
</header>
</div>
<script src="main.js"></script>
</body>
</html>如何在此图像中根据需要定位图像“Images/header-analytics.svg”？
任何帮助将不胜感激！我曾尝试更改图像在 HTML 部分中的位置，但这似乎并没有奏效。我也尝试过使用图像的边距，但这似乎对我不起作用。
如果这是一个愚蠢的问题，我很抱歉，我对 Web 开发很陌生。
【问题讨论】：
-
您可以通过将
display:flex;justify-content:flex-end;添加到.bia-container .background来修复它吗？