<div class="content">
  <h2>Lighting</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
</div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  place-content: center;
  padding: 1rem;
}

body {
  background-image: url(https://picsum.photos/2016/1642?image=10);
  background-size: cover;
  background-attachment: fixed;
}
/* 移动端响应*/
@media screen and (max-width: 767px) {
  body {
    background-position: -99999px -99999px; /* 移出可视区,也可以将其background-size设置为0 */
  }
  body::before {
    content: "";
    background-image: inherit;
    position: fixed;
    inset: 0;
    height: 100vh;
    width: 100vw;

    background-size: cover;
    z-index: -1;
  }
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.7;
  padding: 2vw 3vw 2vw 5vw;
  background: rgb(0 0 0 / 0.6);
  border-radius: 8px;
  backdrop-filter: blur(5px) sepia(0.9) hue-rotate(145deg)
    drop-shadow(5px 9px 24px lime);
  filter: drop-shadow(12px 12px 2px rgb(100 134 45 /0.3));
  width: min(100%, 960px);
  margin: 1rem auto;
}
h2 {
  font-size: clamp(2rem, 1vw + 2.5rem, 3rem);
  text-shadow: 1px 1px 1px rgb(0 0 0 / 50%);
  margin-bottom: 2rem;
}

External CSS

  1. https://www.w3cplus.com/sites/default/files/blogs/2022/2206/devices.css

External JavaScript

This Pen doesn't use any external JavaScript resources.