CSS实现一张图片如何在另一张图片上面居中

html+css

代码编纂器:Dreamweaver CS5

方式/步调

  1. 1

    新建一个html文件,定名为test.html,用于讲解用CSS实现一张图片若何在另一张图片上面居中。

    0bd162d9f2d3572cc67de8a28513632762d0c335.jpg
  2. 2

    在test.html文件内,利用img标签建立一张图片,并设置其class属性为img1,本家儿要用于下面经由过程该class来设置css样式。

    f636afc379310a551a1ba98ab84543a982261094.jpg
  3. 3

    在test.html文件内,再利用img标签建立另一张图片,并设置其class属性为img2,此张图片用于叠加至上一张图片的中心。

    cb8065380cd791238ed3e30aa2345982b2b78098.jpg
  4. 4

    在test.html文件内,编写标签,页面的css样式将写在该标签内。

    64380cd7912397ddbb4aef7a5682b2b7d0a28798.jpg
  5. 5

    在css标签内,对类名为img1的img标签进行样式设置,界说其高度为200px,宽度为200px,position属性设置为相对位置(relative)。

    bf096b63f6246b60f4c4c60ae4f81a4c500fa282.jpg
  6. 6

    在css标签内,对类名为img2的img标签进行样式设置,界说其高度为100px,宽度为100px,position属性设置为绝对位置(absolute),同时利用left和top设置图片居中显示(由计较所得),z-index用于设置图片在最上面。

    96dda144ad345982afb992ec03f431adcbef8498.jpg
  7. 7

    在浏览器打开test.html文件,查看实现的结果。

    6a600c338744ebf8e1bb1041d6f9d72a6159a782.jpg
  • 发表于 2019-11-28 17:03
  • 阅读 ( 1389 )
  • 分类:其他类型

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

0 篇文章

作家榜 »

  1. xiaonan123 189 文章
  2. 汤依妹儿 97 文章
  3. luogf229 46 文章
  4. jy02406749 45 文章
  5. 小凡 34 文章
  6. Daisy萌 32 文章
  7. 我的QQ3117863681 24 文章
  8. 华志健 23 文章

联系我们:uytrv@hotmail.com 问答工具