html - 如何在页面上随机放置背景元素?
问题描述
我想要 HTML CSS 中的这种背景点在身体的随机位置。
我对此代码进行了尝试,但没有得到所需的结果...
<!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>Document</title>
<style>
body {
background: #222222;
background-image:
/* radial-gradient(#97F1FA 20%, transparent 0), */
radial-gradient(#97F1FA 20%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}
</style>
</head>
<body>
</body>
</html>
解决方案
如果您想要运行时随机性,即每次加载 blob 位于不同位置时,您将需要 Javascript。
由于 JS 不是您的标签之一,这里有一个更简单的想法 - 将“随机”位置构建到 body 的背景中 - 实际上是在 body 上的伪 before 元素上,这样您就可以在不影响主要内容的情况下对其进行模糊处理。
显然,您将想要尝试并放入自己的位置/斑点/模糊等。
<!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>Document</title>
<style>
body::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
display: inline-block;
filter: blur(15px);
background: #222222;
background-image: /* radial-gradient(#97F1FA 20%, transparent 0), */
radial-gradient(#97F1FA 20%, transparent 0), radial-gradient(#97F1FA 20%, transparent 0), radial-gradient(#97F1FA 20%, transparent 0), radial-gradient(#97F1FA 20%, transparent 0), radial-gradient(#97F1FA 20%, transparent 0), radial-gradient(#97F1FA 20%, transparent 0), radial-gradient(#97F1FA 20%, transparent 0), radial-gradient(#97F1FA 20%, transparent 0);
background-size: 30px 30px;
background-size: 50vmin 50vmin;
background-position: 0 0, 15% 5%, 22% 45%, 45% 56%, 60% 60%, 75% 3%, 87% 88%, 91% 3%;
background-repeat: no-repeat no-repeat;
overflow: hidden;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
</body>
</html>
推荐阅读
- jmeter - JMeter 异常:org.apache.http.MalformedChunkCodingException
- java - spring boot service auth 不工作 prop config 但使用 java config
- spring-boot - 我如何在@PostFilter 中调用我的自定义类的方法
- mysql - 尝试启动 MySQL 时出错
- java - 为什么即使提供了参数,spring bean 也会运行默认构造函数?
- javascript - Google 跟踪代码管理器问题类名以“-ok”结尾
- java - Java SWT 文件保存
- mustache - AMP:如何在 AMP 中处理复杂的条件逻辑?
- oracle - 根据记录生成唯一编号
- sql-server - SQL Server 存储过程自我分析执行时间?