当我在实时服务器插件(或编辑实时Webstorm IDE)await中运行顶级时,它可以正常工作;但是,当我使用.npx parcel index.html
未捕获的语法错误:await 仅在异步函数和模块的顶层主体中有效
const res = await Promise.resolve('hi there');
console.log(res)
Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script type="module" defer src="script.js"></script>
<title>parcel and top-level-await</title>
</head>
<body>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
{
"devDependencies": {
"parcel": "^2.2.1"
},
"name": "top-level-await",
"version": "1.0.0",
"main": "index.js",
"author": "elmi-elmi",
"license": "MIT"
}
Run Code Online (Sandbox Code Playgroud) 在 CSS 中,我使用该backdrop-filter属性来模糊粘性标题的背景。
因此,我使用backdrop-filer:blur(10px)并设置了opacity:50%.
如果运行代码,粘性标题背景将不会模糊。你能告诉我为什么示例代码不起作用吗?
.sticky{
background-color:orangered;
opacity: 50%;
backdrop-filter: blur(10px);
position: sticky;
top:0;
height: 100px;
}Run Code Online (Sandbox Code Playgroud)
<body>
<div class="sticky">
<h1>This is a header</h1>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam
asperiores at autem, dicta dignissimos ex, fugiat fugit harum id itaque
nulla odio perferendis quasi qui similique! Doloribus nesciunt quaerat
tempora.
</p>
<div style="height: 400px"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam
asperiores at autem, dicta …Run Code Online (Sandbox Code Playgroud)