js中如何背景图片设置为自适应div的大小

  • 原创
  • |
  • 浏览：5184
  • |
  • 更新：
  • js中如何背景图片设置为自适应div的大小1
  • js中如何背景图片设置为自适应div的大小2
  • js中如何背景图片设置为自适应div的大小3
  • js中如何背景图片设置为自适应div的大小4
  • js中如何背景图片设置为自适应div的大小5
  • js中如何背景图片设置为自适应div的大小6
  • js中如何背景图片设置为自适应div的大小7
分步阅读

本篇说一下如何在js中将背景图片设置为自适应div的大小

工具/原料

  • HBuilder X等开发工具

方法/步骤

  1. 1

    首先将jQuery和背景图片引入项目中，hmtest1.html是要编写的HTML文件，如图，三个文件在同级目录中

    js中如何背景图片设置为自适应div的大小
  2. 2

    编写HTML文件，引入jQuery，在body中添加div，为div设置样式，代码如下

    js中如何背景图片设置为自适应div的大小
  3. 3

    页面显示结果如下

    js中如何背景图片设置为自适应div的大小
  4. 4

    下面使用js为div添加背景图片，即在JavaScript中添加代码：

    $("div").css({"background":"url(2.jpg)"});

    代码如下

    js中如何背景图片设置为自适应div的大小
  5. 4
    该信息未经许可获取自百度经验
  6. 5

    页面显示结果如下

    js中如何背景图片设置为自适应div的大小
  7. 6

    下面将图片设为自适应div大小，即在JavaScript中添加代码：

    $("div").css({"background":"url(2.jpg)","background-size": "100% 100%"});

    代码如下

     

    js中如何背景图片设置为自适应div的大小
  8. 7

    页面显示结果如图所示

    js中如何背景图片设置为自适应div的大小
    END
经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。
作者声明：本篇经验系本人依照真实经历原创，未经许可，谢绝转载。
展开阅读全部