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

 时间:2024-10-12 07:25:02

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

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

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

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

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

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

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

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

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

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

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

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

7、在浏览器打开test.html文件,可见,成功实现文字在图片的上面。

怎么用CSS+DIV在图片上布局文字
  • 通过CSS+DIV怎么将文字写在图片上方
  • html轮播图怎么制作
  • 网页背景图片设置的代码是什么呢
  • Dreamweaver如何制作网页并添加背景图片
  • HTML之锚点链接
  • 热门搜索
    全国学生营养日手抄报 祖国发展我成长手抄报 关于我爱读书手抄报 快乐的暑假手抄报 有关诚信的手抄报 初一历史手抄报 节约用水手抄报大全 我们的节日中秋节手抄报 木偶奇遇记手抄报 文明交通我见证手抄报