【发布时间】：2021-12-02 00:23:43
【问题描述】：
我正在创建一个圣诞老人写信的网站，并试图让圣诞老人的图形看起来像是骑在雪地上。问题是我似乎无法让它响应地工作。以下是我希望圣诞老人图形与我拥有的所有其他东西一起放置的样机图像以供参考。我怎样才能使这项工作？我希望任何人都可以提供任何帮助。如果你想帮忙的话，我在codepen 上的当前代码。谢谢。
@import "custom";
.bg-img {
background-image: url("https://i.imgur.com/9L54Zdw.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.custom-shape-divider-bottom-1637548946 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1637548946 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 70px;
}
.custom-shape-divider-bottom-1637548946 .shape-fill {
fill: #FFFFFF;
}
#stop-btn{
display: none;
}
#how-to-mail{
display: none;
}
#hidden-template{
display: none;
}<!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>Reindeer Express</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://kit.fontawesome.com/1463370ce3.js" crossorigin="anonymous"></script>
</head>
<body onload=display_countdown;>
<div class="bg-img">
<nav class="navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="https://i.imgur.com/vavioW9.png" alt="" width="24" height="29" class="d-inline-block align-text-top">
Reindeer Express
</a>
</div>
</nav>
<div class="container col-xxl-8 px-4 py-5">
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
<div class="col-10 col-sm-8 col-lg-6">
<h1 class="display-5 fw-bold lh-1 mb-3 text-white">Reindeer Express</h1>
<p class="lead text-white" id="welcome">Welcome Friends to the Reindeer Express! Have you ever wanted to write a letter
to Santa Clause? Well now you can! Fill out the form below to let Santa know what you would like for Christmas!
But that is not all! You can also download a copy of your letter once you send it! How cool is that?</p>
</div>
<div class="col-lg-6">
<h1 class="text-white" id="countdown_days"></h1>
</div>
</div>
<img src="https://i.imgur.com/4n4uujr.png">
</div>
<div class="custom-shape-divider-bottom-1637548946">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" class="shape-fill"></path>
<path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" class="shape-fill"></path>
<path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" class="shape-fill"></path>
</svg>
</div>
</div>
<section id="form-area" class="py-3">
<div class="container">
<div class="row py-5">
<div class="col text-center">
<h2>Write a letter to Santa</h2>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-12">
<img class="img-fluid d-block mx-auto" src="https://i.imgur.com/ZeukS4C.png" alt="santa standing by a reindeer">
</div>
<div class="col-md-7 col-sm-12">
<form id="form" onsubmit="handleSubmit(event)">
<div class="mb-3 form-floating">
<input type="email" placeholder="ex: parent@mail.com" class="form-control" id="parentEmail" oninput="handleChange(event)" required>
<label for="parentEmail" class="form-label">Parent's Email Address</label>
</div>
<div class="row">
<div class="col">
<div class="form-floating mb-3 ">
<input type="text" placeholder="ex: Sally Smith" class="form-control" id="name" oninput="handleChange(event)" required>
<label for="name" class="form-label">Name</label>
</div>
</div>
<div class="col">
<div class="form-floating mb-3 ">
<input type="number" placeholder="3" class="form-control" id="age" oninput="handleChange(event)" required min="0" max="150">
<label for="age" class="form-label">Age</label>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-floating mb-3">
<select class="form-select" id="gender" aria-label="select gender" oninput="handleChange(event)" required>
<option>Pick boy or girl</option>
<option value="boy">Boy</option>
<option value="girl">Girl</option>
</select>
<label for="gender" class="form-label">Gender</label>
</div>
</div>
<div class="col">
<div class="form-floating mb-3">
<select class="form-select" id="behavior" aria-label="select naughty or nice" oninput="handleChange(event)" required>
<option>Select option</option>
<option value="nice">Nice</option>
<option value="naughty">Naughty</option>
<option value="okay">Okay</option>
</select>
<label for="behavior" class="form-label">Behavior</label>
</div>
</div>
</div>
<div class="mb-3">
<label for="wishlistOne" class="form-label">Name three things you would like for Christmas:</label>
<input type="text" placeholder="1." class="form-control" id="wishlistOne" oninput="handleChange(event)" required>
</div>
<div class="mb-3">
<input type="text" placeholder="2." class="form-control" id="wishlistTwo" oninput="handleChange(event)" required>
</div>
<div class="mb-3">
<input type="text" placeholder="3." class="form-control" id="wishlistThree" oninput="handleChange(event)" required>
</div>
<div class="mb-3 form-floating">
<textarea class="form-control textbox" id="message" oninput="handleChange(event)" rows="10" required></textarea>
<label for="message" class="form-label">Write a message for Santa</label>
<div class="row mt-1">
<div class="col">
<p id="instructions" class="text-muted"></p>
</div>
<div class="col d-flex flex-row-reverse">
<button class="btn btn-outline-primary btn-sm" id="start-btn">
<i class="fas fa-microphone"></i>
Start Voice to Text
</button>
<button class="btn btn-outline-primary btn-sm" id="stop-btn">
<i class="fas fa-microphone-slash"></i>
End Voice to Text
</button>
</div>
</div>
</div>
<div class="col-12">
<button id="send-letter-btn" class="btn btn-danger" type="submit" value="submit">
<i class="fas fa-paper-plane"></i> Submit
</button>
</div>
</form>
</div>
</div>
</div>
</section>
<section id="how-to-mail" class="py-3">
<div class="container">
<div class="row">
<div class="col text-center">
<h3>How to mail your letter</h3>
<p class="fw-light">Instructions from the <a href="https://about.usps.com/holidaynews/">USPS</a></p>
</div>
</div>
<div class="row">
<div class="col mail-instructions">
<p>
<span class="number">1. </span>Print downloaded PDF with your letter
</p>
<p>
<span class="number">2. </span>Place letter in envelope
</p>
<p>
<span class="number">3. </span>Address letter to "Santa Claus, North Pole"
</p>
<p>
<span class="number">4. </span>Place First-Class Mail stamp to envelope
</p>
<p>
<span class="number">5. </span>Have parent mail your letter!
<br>
<small class="fw-light">Additional instructions for <a href="https://about.usps.com/holidaynews/letters-from-santa.htm">parents</a></small>
</p>
</div>
</div>
</div>
</section>
<footer class="py-5 bg-light">
<p>footer</p>
</footer>
<!-- hidden template goes here -->
<div id="hidden-template">
<div class="container">
<div class="row">
<div class="col">
<p id="letter-name"></p>
<p id="letter-age"></p>
<p id="letter-gender"></p>
<p id="letter-behavior"></p>
<p id="letter-wishlist-one"></p>
<p id="letter-wishlist-two"></p>
<p id="letter-wishlist-three"></p>
<p id="letter-message"></p>
</div>
</div>
</div>
<div id="elementH"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="./js/bootstrap.bundle.js"></script>
<script src="./js/form.js"></script>
<script src="./js/speech.js"></script>
<script>
var display_countdown = setInterval(function() {
countdown();
}, 10)
function countdown() {
var currentDate = new Date();
var christmasDate = new Date("12/25/2021 12:00:00");
var timeLeft = christmasDate.getTime() - currentDate.getTime();
var days_Left = Math.round(timeLeft / (1000 * 60 * 60 * 24));
if (currentDate.getTime() !== christmasDate.getTime()) {
days_Left - 1;
document.getElementById('countdown_days').innerHTML = "Christmas is in " + days_Left + " Days!";
} else {
document.getElementById('countdown_days').innerHTML = "MERRY CHRISTMAS!";
}
display_countdown;
}
</script>
</body>
</html>【问题讨论】：
标签： html css bootstrap-5