多语言展示
当前在线:1080今日阅读:195今日分享:14

怎么用CSS+DIV在图片上布局文字

在图片上方添加文字,主要用到css中的position定位属性来实现。下面小编举例讲解怎么用CSS+DIV在图片上布局文字 。
工具/原料
1

zend studio代码编辑器,版本10.0

2

百度浏览器,版本8.7.5

方法/步骤
1

新建一个html文件,命名为test.html,用于讲解怎么用CSS+DIV在图片上布局文字。

2

在test.html文件内,创建一个class为con的div,同时使用img标签创建一张图片显示。

3

在div内,再创建一个class为wz的div,在div内写上测试的文字。

4

在test.html文件内,使用css初始化body样式,设置其内外边距都为0。

5

使用css对class为con的div进行样式定义,设置其位置属性为相对定位,宽度、高度都为100px。

6

使用css对class为wz的div进行样式定义,设置其位置属性为绝对定位,文字大小为30px,层级属性z-index为2,距离页面边缘的左边、顶部都为0。

推荐信息