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

html用css怎样把文字覆盖到图片上?,第1张

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

第一种

<style>

.div{width: 200pxheight: 200pxbackground: url("图片路径") no-repeat}

</style>

<div class="div">

<p>你的文字内容</p>

</div>

第二种

<style>

.div{width: 200pxheight: 200pxposition: relativez-index: 0}

.div img{position: absolutetop: 0left: 0width: 100pxheight: 100px}

.div p{position: absolutetop: 0left: 0z-index: 10}

</style>

<div class="div">

<img src="图片路径" alt="#">

<p>你的文字内容</p>

</div>

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

<style>

.nav{backgrouan:url("../tupian.jpg")width:100pxheight:300px}

.nav ui li {width:100pxheight:30pxfilter:alpha(Opacity=80)-moz-opacity:0.5opacity: 0.5z-index:100background-color:#ffffffmargin-top:270px}

</style>

<div clas="nav">

<ul>

<li><a href="#">青山绿水</a></li>

</ul>

</div>

用CSS滤镜 纯手打

<div style="position:absolutemargin:0"><img src="1.png" /></div>

<div style="position:absolutemargin:0 0 0 100px">覆盖</div>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7157424.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-02
下一篇 2023-04-02

发表评论

登录后才能评论

评论列表(0条)

保存