1. html 结构

  class="is-required" for="name">姓名
  "text">
  

    
欢迎来到米修在线
    
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam labore qui ut excepturi, accusamus, dolores soluta porro quae earum delectus rem neque, culpa ab nostrum aut est! Molestiae, nobis rem?
    
Lorem ipsum dolor sit amet.
    
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita asperiores adipisci deleniti quibusdam voluptate debitis soluta assumenda sit aspernatur aperiam?
  

2. css 样式

body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: #333;
      color: #fff;
      margin: 0;
    }
    header {
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      align-items: center;
      height: 100vh;
    }
    header:before {
      background: url('https://images.pexels.com/photos/3294254/pexels-photo-3294254.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500') no-repeat center center/cover;  
      opacity: 0.4;
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    header > h1 {
      font-size: 4rem;
      margin: 1rem;
    }
    /* 设置必填项 */
    .is-required:after {
      content: '*';
      color: red;
      padding: 2px;
    }
    /* 在文本前 */
    .is-required:before {
      content: '*';
      color: red;
      padding: 2px;
    }

3. 重点

如果你想给一个input设置必填项 就在他的后面加上

.is-required:after {       content: '*';

如果想加到文本的前面就把 after 改为 before

给父元素加上笼罩层

header:before {       background: url('https://images.pexels.com/photos/3294254/pexels-photo-3294254.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500') no-repeat center center/cover;         opacity: 0.4;       content: '';       position: absolute;       width: 100%;       height: 100%;       z-index: -1;     }