画像をぼかすのって、意外と簡単でした。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="links/rule.css">
</head>
<body>
<img src="images/chicken.png"
alt="ぼかされるオモチャのニワトリノの画像">
</body>
</html>
<!-- index.html -->
/* rule.css */
* {
margin: 0px;
padding: 0px;
}
body {
background-color: deepskyblue; /* #00bfff */
text-align: center;
}
img {
filter: blur(20px); /* ぼかしの度合いを設定 */
}
/* rule.css */
用意した640×480pxのpng画像
img { filter: blur(0px); }
img { filter: blur(5px); }
img { filter: blur(10px); }
img { filter: blur(20px); }
