因此，我想使div具有透明背景，以便在画布上显示。因为我现在所拥有的是透明的，但是忽略了画布（如您在此处看到的那样{http://hyun.x10host.com/vetements/Windbreaker_Script.html）。有一个具有效果的画布，但是由于某种原因，页面的背景颜色会显示出来，而画布会被忽略。我不知道div是遮盖画布还是png透明图像的那个。
html,
body {
background: -moz-linear-gradient(top, #1f1f1f 0%, #3b3b3b 100%);
background: -webkit-linear-gradient(top, #1f1f1f 0%, #3b3b3b 100%);
background: linear-gradient(to bottom, #1f1f1f 0%, #3b3b3b 100%);
width: 100%;
height: 5000px;
margin: 0;
padding: 0;
overflow: hidden;
min-height: 100vh;
scroll-behavior: smooth;
}
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.intro_bg {
width: 100%;
height: 100%;
position: fixed;
z-index: 1001;
background-color: #242424;
display: block;
}
@-webkit-keyframes small {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
50% {
-webkit-transform: translate(0, 2rem);
transform: translate(0, 2rem);
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@keyframes small {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
50% {
-webkit-transform: translate(0, 2rem);
transform: translate(0, 2rem);
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@-webkit-keyframes big {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
50% {
-webkit-transform: translate(0, -3rem);
transform: translate(0, -3rem);
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@keyframes big {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
50% {
-webkit-transform: translate(0, -3rem);
transform: translate(0, -3rem);
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
.product {
position: relative;
display: flex;
width: 100%;
height: 90%;
z-index: 2;
padding: 0 2rem;
}
.product-photo {
padding: 80px 0px 0px 0px;
width: 100%;
height: 100%;
}
.product-photo img:nth-child(1) {
width: 300px;
height: auto;
margin-top: 10%;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-animation-name: small;
animation-name: small;
-webkit-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.product-photo img:nth-child(2) {
width: 500px;
height: auto;
-webkit-animation-name: big;
animation-name: big;
-webkit-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-direction: reverse;
}
.Script_text {
width: 40%;
height: auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HYUN - Men hoodies</title>
<link rel="stylesheet" href="style/Windbreaker_Script.css">
<link rel="icon" type="image/icon" href="images/icons/logo.ico" />
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/bebas" type="text/css" />
<link rel="stylesheet" href="assets/cloth-list_assets/normalize.min.css">
<link rel="stylesheet" href="assets/cloth-list_assets/reset.min.css">
<link rel="stylesheet" href="assets/women-men_assets/web/assets/mobirise-icons/mobirise-icons.css">
<link rel="stylesheet" href="assets/women-men_assets/tether/tether.min.css">
<link rel="stylesheet" href="assets/women-men_assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/women-men_assets/socicon/css/styles.css">
<link rel="stylesheet" href="assets/women-men_assets/theme/css/style.css">
<link rel="stylesheet" href="assets/women-men_assets/mobirise/css/mbr-additional.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(window).on('beforeunload', function () {
$(window).scrollTop(0);
});
$(document).ready(function () {
$('div.intro_bg').delay(100).fadeOut(500);
});
</script>
</head>
<body>
<header>
<div class="intro_bg"></div>
<div class="navbar">
<div class="menu-icon">
<span class="menu-icon__line menu-icon__line-left"></span>
<span class="menu-icon__line"></span>
<span class="menu-icon__line menu-icon__line-right"></span>
</div>
<a href="Home.html"><img class="navlogo" src="images/logo.jpg"></a>
<a href="Home.html"><img class="navcart" src="images/icons/shopping_cart.png">
<h6 class="shopping_cart_amount"><b>0</b></h6>
</a>
</div>
<script type="text/javascript">
var opened = false;
$('.menu-icon').click(function (e) {
if ($("body").hasClass("nav-active")) {
$(".nav__content").fadeOut(300);
} else {
$(".nav__content").fadeIn(300);
}
});
</script>
<div class="nav_menu">
<div class="nav__content" style="display: none;">
<ul class="nav__list">
<table class="nav_table" border="0" align="center">
<tr>
<th>
<a href="Men.html">
<li class="nav__list-main" id="men" style="color: black;">Men</li>
</a>
</th>
<th>
<a href="Women.html">
<li class="nav__list-main" id="women" style="color: black;">Women</li>
</a>
</th>
</tr>
<tr>
<td>
<a href="Men_Bundle.html">
<li class="nav__list-item" style="color: black;">Men bundles</li>
</a>
</td>
<td>
<a href="#">
<li class="nav__list-item" style="color: black;">Women bundles</li>
</a>
</td>
</tr>
<tr>
<td>
<a href="#">
<li class="nav__list-item" style="color: black;">T-shirts</li>
</a>
</td>
<td>
<a href="#">
<li class="nav__list-item" style="color: black;">Blouses</li>
</a>
</td>
</tr>
<tr>
<td>
<a href="Men_Hoodie.html">
<li class="nav__list-item" style="color: black;">Hoodies</li>
</a>
</td>
<td>
<a href="#">
<li class="nav__list-item" style="color: black;">Hoodies</li>
</a>
</td>
</tr>
<tr>
<td>
<a href="#">
<li class="nav__list-item" style="color: black;">Jackets</li>
</a>
</td>
<td>
<a href="#">
<li class="nav__list-item" style="color: black;">Jackets</li>
</a>
</td>
</tr>
<tr>
<td>
<a href="#">
<li class="nav__list-item" style="color: black;">Headware</li>
</a>
</td>
<td>
<a href="#">
<li class="nav__list-item" style="color: black;">Headware</li>
</a>
</td>
</tr>
</table>
</ul>
</div>
</div>
</header>
<main>
<div class="product-photo">
<img src="images/Windbreaker (Back).png">
<img src="images/Windbreaker (Front).png">
<img class="Script_text" src="images/Script_text.png">
</div>
<canvas style="height: 100%; width: 99.4%; -webkit-filter: blur(2px); opacity: 0.5;"></canvas>
<section class="footer4 cid-rgSS3LUU5v" id="footer4-1n" style="bottom: 0; position:absolute; width: 100%;">
<div class="container">
<div class="media-container-row content mbr-white">
<div class="col-md-3 col-sm-4">
<div class="mb-3 img-logo">
<a href="Men.html">
<img src="assets/women-men_assets/images/logo-192x189.jpg" alt="" title="">
</a>
</div>
<p class="mb-3 mbr-fonts-style foot-title display-7">
HYUN
</p>
<p class="mbr-text mbr-fonts-style mbr-links-column display-7">
<a href="#" class="text-white">About Us</a>
<br><a href="#" class="text-white">Terms Of Service</a><br><a href="#" class="text-white">Selected
Work</a>
<br><a href="#" class="text-white">Get In Touch</a>
</p>
</div>
<div class="col-md-4 col-sm-8">
<p class="mb-4 foot-title mbr-fonts-style display-5">Need help?
<br></p>
<p class="mbr-text mbr-fonts-style foot-text display-7">Can't get the right size? <br><br>Concerned
about the quality of our products? <br><br>Questions about the shippings and
conditions? <br><br>Need human assistance?
<br></p>
</div>
<div class="col-md-4 offset-md-1 col-sm-12">
<p class="mb-4 foot-title mbr-fonts-style display-7">
SUBSCRIBE
</p>
<p class="mbr-text mbr-fonts-style form-text display-7">Get monthly updates and be notified
when new stuff comes out and when new sales hit!
<br></p>
<div class="media-container-column" data-form-type="formoid">
<div data-form-alert="" hidden="" class="align-center">
Thanks for filling out the form!
</div>
<form class="form-inline" action="Men.html" method="post" data-form-title="Subscribe Form">
<input type="hidden" value="PeFN16GpuxO6F7tp53atFvR/meO1Z79EhlA19iJtRo2F2ehexG/h2YtjHsL5hDt3XgMZfUnR5tdHIAlKH0Ivm1XSPsIUHSzoVcBBqgOmxczO/FG7wIAsZTpqzkeUDExn"
data-form-email="true">
<div class="form-group">
<input type="email" class="form-control input-sm input-inverse my-2" name="email"
required="" data-form-field="Email" placeholder="Email" id="email-footer4-1n">
</div>
<div class="input-group-btn m-2"><button href="" class="btn btn-white-outline display-4"
type="submit" role="button">Subscribe</button></div>
</form>
</div>
<p class="mb-4 mbr-fonts-style foot-title display-7">
<br>Follow us here!</p>
<div class="social-list pl-0 mb-0">
<div class="soc-item">
<a href="https://twitter.com/" target="_blank">
<span class="socicon-twitter socicon mbr-iconfont mbr-iconfont-social"></span>
</a>
</div>
<div class="soc-item">
<a href="https://www.facebook.com/pages/" target="_blank">
<span class="mbr-iconfont mbr-iconfont-social mbri-mobile"></span>
</a>
</div>
<div class="soc-item">
<a href="https://www.youtube.com/c/" target="_blank">
<span class="mbr-iconfont mbr-iconfont-social mbri-letter"></span>
</a>
</div>
<div class="soc-item">
<a href="https://instagram.com/" target="_blank">
<span class="socicon-instagram socicon mbr-iconfont mbr-iconfont-social"></span>
</a>
</div>
</div>
</div>
</div>
<div class="footer-lower">
<div class="media-container-row">
<div class="col-sm-12">
<hr>
</div>
</div>
<div class="media-container-row mbr-white">
<div class="col-sm-12 copyright">
<p class="mbr-text mbr-fonts-style display-7">
© Copyright 2019 HYUN - All Rights Reserved
</p>
</div>
</div>
</div>
</div>
</section>
</main>
<script type="text/javascript">
$('a').click(function (e) {
e.preventDefault();
newLocation = this.href;
$('body').fadeOut('slow', newpage);
});
function newpage() {
window.location = newLocation;
}
</script>
<script type="text/javascript">
var docheight = document.querySelector('body');
canvas = document.getElementsByTagName('canvas')[0];
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
var ctx = canvas.getContext('2d');
var characterList = ['gridare alla mia ex', 'Diohaunpiano', 'Die Realität ist falsch, Träume sind real',
'الله لديه خطة', 'El amor es falso', 'Любовь это иллюзия', 'الحب خدعة', '너는내동기였어', 'Θααγαπήσωκαιπάλι',
'वास्तविकता गलत है कि सपने सच हो रहे हैं', '나는네가네가나를사랑한다고말했을때꿈꿔왔다고생각했다', 'Liebeistfalsch',
'No hay fin lo llaman atemporal.', 'Elamoresunailusion', 'Με άφησε σπασμένο σε κομμάτια',
'Ηαγάπη είναι ψεύτικη', 'حذرا لا تبديل الجانبين', '현실은 잘못된 꿈을 현실위한 것입니다',
'gridare alla mia ex', '사랑은환상이다 ', 'Реальность ошибочна мечты реальны', 'KeinEndenennteszeitlos',
'나는네가네가나를사랑한다고말했을때꿈꿔왔다고생각했다', '사랑은환상이다 ', 'ظننت أنني أحلم عندما قلت أنك تحبني',
'الواقع خاطئ ، الأحلام حقيقية'
];
var layers = {
n: 7,
letters: [300, 100, 50, 25, 20, 10, 5],
coef: [0.1, 0.2, 0.4, 0.6, 0.8, 1, 1.2],
size: [16, 22, 36, 40, 46, 50, 55],
color: ['#fff', '#eee', '#ccc', '#bbb', '#aaa', '#aaa', '#aaa'],
font: 'Courrier'
};
var characters = [];
var mouseX = document.body.clientWidth / 1;
var mouseY = document.body.clientHeight / 1;
var rnd = {
btwn: function (min, max) {
return Math.floor(Math.random() * (max - min) + min);
},
choose: function (list) {
return list[rnd.btwn(0, list.length)];
}
};
function drawLetter(char) {
ctx.font = char.size + 'px ' + char.font;
ctx.fillStyle = char.color;
var x = -200 + char.posX + (mouseX - canvas.width / 5) * char.coef;
var y = -200 + char.posY + (mouseY - canvas.height / 5) * char.coef;
ctx.fillText(char.char, x, y);
}
document.onmousemove = function (ev) {
mouseX = ev.pageX - canvas.offsetLeft * 0.2;
mouseY = ev.pageY - canvas.offsetTop * 0.2;
if (window.requestAnimationFrame) {
requestAnimationFrame(update);
} else {
update();
}
};
function update() {
clear();
render();
}
function clear() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function render() {
for (var i = 0; i < characters.length; i++) {
drawLetter(characters[i]);
}
}
function createLetters() {
for (var i = 0; i < layers.n; i++) {
for (var j = 0; j < layers.letters[i]; j++) {
var character = rnd.choose(characterList);
var x = rnd.btwn(0, canvas.width);
var y = rnd.btwn(0, canvas.height);
characters.push({
char: character,
font: layers.font,
size: layers.size[i],
color: layers.color[i],
layer: i,
coef: layers.coef[i],
posX: x,
posY: y
});
}
}
}
createLetters();
update();
</script>
<script type="text/javascript">
var app = function () {
var body = void 0;
var menu = void 0;
var menus = void 0;
var init = function init() {
body = document.querySelector('body');
menu = document.querySelector('.menu-icon');
menuItems = document.querySelectorAll('.nav__list-main');
menuTitles = document.querySelectorAll('.nav__list-item');
applyListeners();
};
var applyListeners = function applyListeners() {
menu.addEventListener('click', function () {
return toggleClass(body, 'nav-active');
});
};
var toggleClass = function toggleClass(element, stringClass) {
if (element.classList.contains(stringClass))
element.classList.remove(stringClass);
else
element.classList.add(stringClass)
};
init();
}();
</script>
<script type="text/javascript">
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
"images/supreme-fall-winter-2014-collection-lookbook-2-1200x1200.png",
"images/supreme-fall-winter-2014-collection-lookbook-2-1200x120022.png",
"images/supreme-fall-winter-2014-collection-lookbook-2-1200x12002222.png",
"images/Plain_front.png",
"images/Oni_back.png",
"images/Cherry_back.png"
)
</script>
<script src="assets/women-men_assets/web/assets/jquery/jquery.min.js"></script>
<script src="assets/women-men_assets/popper/popper.min.js"></script>
<script src="assets/women-men_assets/tether/tether.min.js"></script>
<script src="assets/women-men_assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/women-men_assets/smoothscroll/smooth-scroll.js"></script>
<script src="assets/women-men_assets/parallax/jarallax.min.js"></script>
<script src="assets/women-men_assets/sociallikes/social-likes.js"></script>
<script src="assets/women-men_assets/theme/js/script.js"></script>
<script src="assets/women-men_assets/formoid/formoid.min.js"></script>
</body>
</html>
答案 0 :(得分：1)
canvas{
height: 100%;
width: 99.4%;
-webkit-filter: blur(2px);
opacity: 0.2;
position: absolute;
top: 0;
}
.product-photo {
padding: 80px 0px 0px 0px;
width: 100%;
height: 100%;
z-index: 1000;
position: relative;
}
注意：将画布放在.product-photo div后面时存在位置问题 因此将画布绝对设置为主容器并将.product-photo div设置为相对于画布的位置将解决此问题