如何用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;
}