html用css怎样把文字覆盖到图片上?

 我来答
空灵0525
推荐于2019-10-12
知道答主
回答量:0
采纳率:50%
帮助的人:0
展开全部

可以把图片作为文字那个块标签的背景图片或者你把图片和文字都放在一个同一个div 里面然后给图片和文字加上定位,然后文字的图层比图片的图层位置高就行了。

第一种
<style>
.div{width: 200px;height: 200px;background: url("图片路径") no-repeat;}
</style>

<div class="div">
<p>你的文字内容</p>
</div>

第二种
<style>
.div{width: 200px;height: 200px;position: relative;z-index: 0}
.div img{position: absolute;top: 0;left: 0;width: 100px;height: 100px;}
.div p{position: absolute;top: 0;left: 0;z-index: 10;}
</style>

<div class="div">
<img src="图片路径" alt="#">
<p>你的文字内容</p>
</div>

CSS怎么将一个元素重叠到图片上显示,假如我有一张图片,图片上面显示半透明的横条,横条上面有文字,效果如图:

<style>
.nav{backgrouan:url("../tupian.jpg");width:100px;height:300px;}
.nav ui li {width:100px;height:30px;filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;z-index:100; background-color:#ffffff;margin-top:270px;}
</style>
<div clas="nav">
<ul>
<li><a href="#">青山绿水</a></li>
</ul>
</div>
用CSS滤镜 纯手打

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式