c⊙﹏⊙ss完成文本在情况照片以上

日期:2021-01-21 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

实际效果:

<div class="imgs">
  <!-- 情况图 -->
  <div class="background">
    <img :src="item.voteTime ? imgSrc1:imgSrc2" width="100%" height="100%" alt="" />
  </div>
  <!-- 文本 -->
  <div class="front">
    <div v-if="item.voteTime">
      <p>十分谢谢!</p>
      <p>您已网络投票:<span>{{item.voteTime}}</span></p>
    </div>
    <p v-else style="color:#999999">很抱歉,您未完网络投票~</p>
  </div>
</div>

data() {
  return {
    imgSrc1:require('@/common/imgs/yitoupiao.png'),
    imgSrc2:require('@/common/imgs/weiwancheng.png'),
  }
},

外边大的div:设定宽高;
情况照片:1)假如是铺满则宽高都设定100%,2)假如只占一个一部分可设定精准定位。关键:z-index一定要比文本的等级低,不然会被遮挡住;
文本:依据要求置放部位可精准定位并不精准定位,关键z-index设定高过照片;

.imgs {
  background: #fff;
  position: relative;
  width: 100%;
  height: 250px;
  color: #195541;
  .background{
    // width:100%;  
    // height:100%;  /**宽高100%是以便照片铺全屏幕幕 */
    // z-index:-1;
    z-index:1;
    position: absolute;
    width: 250px;
    height: 100%;
    right: 20px;
    bottom: 0px;
  }
  .front{
    z-index:2;
    position: absolute;
    text-align: center;
    top: 39%;
    left: 25%;
    font-weight: normal;
    line-height: 40px;
    font-size: 28px;
  }
}

开发设计全过程中碰到一个bug:便是我一刚开始设定的情况照片z-index为-1,造成在h5上,情况照片一会儿能显示信息一会儿无法显示信息,之后改成正数1,才处理了这一难题。

到此这篇有关css完成文本在情况照片以上的文章内容就详细介绍到这了,大量有关css文本在情况照片上內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!