大象广告联盟AD

大象广告联盟AD

利用CSS在图片中添加文字

来自版块: 建站教程发表于: 2023-6-29 13:56:08

3528

如本资源下载地址失效,请点击此处进行反馈

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

复制代码

效果图如下：

CSS，图片，添加，文字

回复

教程 / CSS+DIV素材

Discuz教程
CSS+DIV素材

返回版块

大象广告联盟AD

大象广告联盟AD