首页 前端知识 利用CSS在图片中添加文字

利用CSS在图片中添加文字

2024-02-12 14:02:41 前端知识 前端哥 336 583 我要收藏

       前端项目中想要在图片中添加文字,方法有两种: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>

效果图如下:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1831.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!