html怎么让文字在图片表面

PHP中文网 JavaScript 百度已收录

当前第2页 返回上一页

例如如下代码块：

1

2

3

4

5

6

<div style="position:relative;">

　　<img src="...." />

　　<div style="position:absolute; z-index:2; left:10px; top:10px">

　　　　haha

　　</div>

</div>

其余的位置再根据实际情况进行微调就好~~

示例：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <style>

            div{

                width: 100%;

                color: red;

                font-size: 20px;

            }

        </style>

    </head>

    <body>

        <div style="position:relative;">

        　　<img src="demo/img/5.jpg" width="500"/>

        　　<div style="position:absolute; z-index:2; left:10px; top:10px">

        　　　　haha

        　　</div>

        </div>

    </body>

</html>

2.png

关于position中relative 以及 absolute 属性值的区别：

position：absolute这个是绝对定位；是相对于浏览器的定位。

比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。

position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。

比如：<div class="1"></div><div class="2"></div>

当1固定了位置。1的样式float:left;width:100px; height:800px;

2的样式为float:left; position：relative；margin-left:20px;width:50px;

2的位置在1的右边，距离120px

更多编程相关知识，请访问：编程视频！！

以上就是html怎么让文字在图片表面的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

纯css制作一个简单气泡对话框（图文详解）

Html中的特殊字符如何源码输出

Html+css+javascript如何实现列表循环滚动

什么是css（层叠样式表）？

Html中滚动条的代码是什么？如何设置Html滚动条？

Html块级标签行内标签的显示模式

css结构化伪类选择器有哪些

css如何设置不规则阴影

Html中address是什么

Html px、em、pt长度单位

更多相关阅读请进入《Html》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...