CSS圖檔上面放文字實作方式

忽略我用element-ui不熟悉的渣渣代碼～～～

要實作的效果

代碼

<div style="width:100%;height:400px;position:relative">
      <el-image
        style="width: 100%; height: 400px;position:absolute;left:0px"
        :src="require('@/assets/sea.jpeg')"
        fit="cover"
      >
      </el-image>
      <div style="width:100%;height:100px;position:absolute;top:150px">
        <span style="color:white;font-size:40px;line-height:100px">堅持自己，莫問前程！</span>
      </div>
    </div>
           

這裡生效的代碼主要是

position:relative

和

position:absolute;left:0px

，如果沒有

position:relative

效果為下圖：