您的位置:首页 > 素材教程 > 详情

css如何在图片上标注文字不显示-css如何设置能让一个div元素覆盖在div元素上后下面的div元

原创:素材网 2 年前

如何用CSS往图片上嵌入文字??

具体操作步骤如下:

一、首先是准备一个HTML文档,接着在HTML中添加一个DIV,并给DIV设置宽高和背景图片。

二、接下来运行页面就可以看到如下图所示的带背景图片的div了。

三、然后在div中包裹文字就可以了,如下图所示。

四、运行页面我们就可以看到图片上显示出文字了,如下图所示,以上就是用CSS往图片上加文字的实现了。

css怎么在图片上添加文字

文字在图片上显示

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="UTF-8">

<style>

#abox{

position:relative;/*容器相对定位*/

width:300px;/*宽度300px*/

margin:0 auto;/*横向居中*/

}

#abox img{

width:300px;/*宽度300px*/

}

span{

position:absolute;/*文字容器绝对定位*/

display:block;/*span转为块元素*/

width:100%;/*宽度相对于父容器100%*/

text-align:center;/*文字居中*/

top:0;/*距离父容器顶部0*/

left:0;/*距离父容器左侧0*/

color:red;/*文字颜色红色*/

font-size:18px;/*文字大小既文字高度18px*/

font-weight:bold;/*文字加粗*/

}

</style>

</head>

<body>

<div id="abox"><!--容器,相对定位-->

<img src=""><!--图片-->

<span>我要显示文字</span><!--文字,绝对定位-->

</div>

</body>

</html>

css如何设置能让一个div元素覆盖在div元素上后下面的div元素中的文字不显示出来

假设上面div的class为two,下面div的class为one。

1、下面的div文字的颜色设置成transparent。

.one{

color:transparent;

}

2、给上面的div设置背景色。

.two{

background-color: fff;

}

扩展资料:

两个div重合的方法:

父级元素绝对定位,子级元素相对定位。通过left、right、top、bottom实现子级在父级内任意定位

假设父级元素的class为con,子级元素的class为two。

.con{

position: relative;

}

.two{

position: absolute;

top:0;

}

< 上一篇 如何增加图片保存类型-如何把图片保存为jpg格式 下一篇 > css如何让图片拉伸-制作html网页时如何使用CSS使背景图片拉伸(
相关推荐
独特的公益海报-公益海报有哪些风格
儿童海报制作简单-六一儿童节的宣传海报怎么做啊
春节海报-春节海报设计理念有哪些?
广府特色美食海报小学生怎么画?小学生海报怎么画
有没有制作海报的手机软件-在手机上做海报用什么软件好
蛋糕店宣传海报手绘-蛋糕活动海报怎么设计图片
最新模板
最新素材