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

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

原创:素材网 1 年前

如何用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使背景图片拉伸(
相关推荐
五上英语海报简单-简单又漂亮的英语海报如何制作?
中秋节品牌海报-如何设计一张有创意的中秋节热点海报?
插画在产品包装图片-学习插画该怎么入门?
春季新款海报图片-宣传海报设计该怎么做才好?
海报咋设计-如何制作海报?
促销海报怎么写能吸引人?促销活动推广语言的吸引力怎么写
最新模板
最新素材