当前位置:Gxlcms > 前端框架 > CSS怎么实现body背景层高于块元素

CSS怎么实现body背景层高于块元素

时间:2021-07-01 10:21:17 帮助过:41人阅读

本篇文章给大家带来的内容是关于CSS怎么实现body背景层高于块元素,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

本文实例讲述了CSS实现body背景层高于块元素的方法,分享给大家供大家参考。具体实现方法如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>demo</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
  7. </head>
  8. <style>
  9. html, body{
  10. width: 100%;
  11. max-width: 640px;
  12. height: 100%;
  13. overflow-x: hidden;
  14. margin: 0 auto;
  15. background-color: #000;
  16. font-family: 微软雅黑, 华文细黑, 黑体;
  17. }
  18. body{
  19. background-image: url('img/person1.png');
  20. background-repeat: no-repeat;
  21. background-position: bottom;
  22. background-color: transparent;
  23. background-size: 100%;
  24. }
  25. .box{
  26. width: 100%;
  27. height: 50%;
  28. background-color: green;
  29. z-index: -1;
  30. position: absolute;
  31. }
  32. </style>
  33. <body>
  34. <div></div>
  35. </body>
  36. </html>

效果如下:

微信截图_20181120164934.png

以上就是对CSS怎么实现body背景层高于块元素的全部介绍,如果您想了解更多有关CSS3教程,请关注PHP中文网。

以上就是CSS怎么实现body背景层高于块元素的详细内容,更多请关注Gxlcms其它相关文章!

人气教程排行