网站地图    收藏   

主页 > 前端 > css教程 >

css实现文字在背景图片之上

来源:自学PHP网    时间:2020-10-23 17:03 作者:小飞侠 阅读:

[导读] css实现文字在背景图片之上...

今天带来css实现文字在背景图片之上教程详解

效果:

非常感谢!

您已投票:{{item.voteTime}}

抱歉,您未完成投票~

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文字在背景图片上内容请搜索自学php网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持自学php网!


以上就是关于css实现文字在背景图片之上全部内容,感谢大家支持自学php网。

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论