1. <body>
  2. <h1>透明ノイズを写真やイラストに重ねる</h1>
  3. <img src="img/lopan_cafe.jpg" alt="Lopan cafe">
  4. <div class="noise"></div>
  5. </body>
  1. body {
  2. width: 100%;
  3. height: 100%;
  4. margin: 0;
  5. font-family: "Heiti SC";
  6. }
  7. h1 {
  8. z-index: 1;
  9. position: relative;
  10. margin: 0;
  11. padding: 1em;
  12. color: #fff;
  13. text-shadow: 0 1px 6px rgba(0,0,0,.2)
  14. }
  15. .noise,
  16. img {
  17. position: absolute;
  18. top: 0;
  19. left: 0;
  20. }
  21. .noise {
  22. position: fixed;
  23. width: 100%;
  24. height: 100%;
  25. background: url(../img/noise_5.png);
  26. -webkit-animation: noise_anima 1s steps(10) infinite;
  27. animation: noise_anima 1s steps(10) infinite;
  28. }
  29. img {
  30. width: 100%;
  31. height: auto;
  32. }
  33. @-webkit-keyframes noise_anima {
  34. from { background-position: 0 0; }
  35. to { background-position: 123px 456px; }
  36. }
  37. @keyframes noise_anima {
  38. from { background-position: 0 0; }
  39. to { background-position: 123px 456px; }
  40. }

透明ノイズを写真やイラストに重ねる

Lopan cafe