图像上的文字html css [复制]

图像上的文字html css [复制],第1张

概述参见英文答案 > How to put text over images in html?                                    5个 我正在尝试在HTML中设置图像并希望文本在其上运行.但是,当我使用以下代码时,文本将在图像下运行. HTML <div id="titel"> <img src="images/titel.jpg" alt="titel"> 参见英文答案 > How to put text over images in html?                                    5个
我正在尝试在HTML中设置图像并希望文本在其上运行.但是,当我使用以下代码时,文本将在图像下运行.

HTML

<div ID="titel">    <img src="images/titel.jpg" alt="titel">    <h3>Titel</h3>    </div>

CSS

#titel    {        float:left;        wIDth:220px;        height:100px;        margin:0px 5px 5px;    }    h2    {        position:absolute;    }
解决方法@H_502_25@ 您需要添加位置:相对于titel div和顶部值到图像.

#titel {      float:left;      wIDth:220px;      height:100px;      margin:0px 5px 5px;      position:relative;  }  h3 {      position:absolute;      top:0;  }

jsFiddle example

另一种选择是将图像设置为div的背景图像,并完全取消定位.

jsFiddle example

(另请注意,在您的示例中,您有一个h3元素,但在CSS中,您的目标是h2元素.)

总结

以上是内存溢出为你收集整理的图像上的文字html css [复制]全部内容,希望文章能够帮你解决图像上的文字html css [复制]所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

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

原文地址:https://54852.com/web/1043393.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-24
下一篇2022-05-24

发表评论

登录后才能评论

评论列表(0条)

    保存