css如何给div设置背景图

  • 原创
  • |
  • 浏览：5824
  • |
  • 更新：
  • css如何给div设置背景图1
  • css如何给div设置背景图2
  • css如何给div设置背景图3
  • css如何给div设置背景图4
  • css如何给div设置背景图5
  • css如何给div设置背景图6
  • css如何给div设置背景图7
分步阅读

在写前端页面时，有时会需要给div设置背景图。今天我给大家介绍下css如何给div设置背景图

css如何给div设置背景图

工具/原料

  • html+css
  • 代码编辑器（本文用的HBuilder）

方法/步骤

  1. 1

    打开编辑其，在编辑器里新建background.html，用来学习今天的内容

    css如何给div设置背景图
  2. 2

    在body标签里，新建一个名为test的div

    css如何给div设置背景图
  3. 3

    在css标签里，给test设置宽200px，高200px，粗细为1px的黑色边框线以及居中显示

    css如何给div设置背景图
  4. 4

    在浏览器中打开background.html，看下目前的效果

    css如何给div设置背景图
  5. 4
    相关内容未经许可获取自百度经验
  6. 5

    回到编辑器，给test加上background: url(04.jpg)属性，此属性是给div设置背景图。

    css如何给div设置背景图
  7. 6

    再次在浏览器中打开background.html，看下最终的效果。

    css如何给div设置背景图
  8. 7

    此处贴一下代码，便于参考：

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>css如何给div设置背景图</title>

    </head>

    <style>

    .test{

    width: 200px;

    height: 200px;

    border: 1px solid #000;

    margin: 0 auto;

    background: url(04.jpg);

    }

    </style>

    <body>

    <div class="test"></div>

    </body>

    </html>

    END

方法/步骤2

  1. 1

    总结：

    1.打开编辑器

    2.新建background.html

    3.给class为test的idv加上基础属性

    4.给class为test的idv加上background属性

    END

注意事项

  • background属性的url里放的事图片的路径+路径名
  • 如果帮助到你，请给个赞哦
经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。
作者声明：本篇经验系本人依照真实经历原创，未经许可，谢绝转载。
展开阅读全部