利用CSS在图片中添加文字-Discuz教程下载

利用CSS在图片中添加文字

开通本站Svip会员,全站资源免费下
    前端项目中想要在图片中添加文字,方法有两种:1、js;2、CSS。第一种方法比较复杂,主要是写将图片与文字组合成新的图片的js代码,第二种方法简单粗暴,这里只讲第二种方法。
       利用css在图片中添加文字,将图片设置成背景即可,代码如下:
  1. <template>
  2.         <div class="picture">
  3.                 <p id="p1">九寨沟</p>
  4.                 <p id="p2">人间天堂</p>
  5.         </div>
  6. </template>
复制代码
  1. <style type="text/css">
  2.         .picture {
  3.                 background: url('/static/images/pic.jpg')  no-repeat;  //设置背景图片来源
  4.                 background-size: 100% 100%;  //将图片全屏展示
  5.                 width: 100%;   //图片的宽度适配整个界面
  6.                 height: 220px;  //设置图片高度
  7.         }
  8.         #p1 {
  9.                 line-height: 180px;  //整行文字的高度
  10.                 margin-left: 170px;  //文字距离左边距的长度
  11.                 font-size: 22px;  //字体大小
  12.                 color: rgb(255,255,255);  //字体颜色
  13.         }
  14.         #p2 {
  15.                 line-height: 0px;
  16.                 margin-top: -50px;
  17.                 margin-left: 190px;
  18.                 font-size: 22px;
  19.                 color: rgb(255,255,255);
  20.         }
  21. </style>
复制代码

效果图如下:
07c00f46e4fe409bbddeb2266f6aa1a2.png

全部评论 0

您需要登录后才可以回帖 立即登录
登录
0
0
0
返回顶部