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