Div放在画布上时不透明
Div放在画布上时不透明
提问于 2019-03-12 12:46:55
所以我想让一个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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-12 13:13:12
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;
}注意:将canvas放在.product-photo div后面存在位置问题，因此将canvas绝对设置为主容器，并将.product-photo div设置为相对于它的位置将解决此问题
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55114355
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号