JavaScript设置背景图片

最新推荐文章于 2024-06-25 10:20:33 发布
最新推荐文章于 2024-06-25 10:20:33 发布
阅读量5w 收藏 21
点赞数 5
分类专栏： 前端js

本章节通过代码实例介绍一下如何利用js实现动态的为div元素设置背景图片。

核心代码片段如下:

     
     

      
      

       
       [JavaScript] 
       
       纯文本查看 
       
       复制代码
       
       运行代码
      
      

      
      

       
       

        
        
 
            

              1 
            
 
            
 
             
 
              odiv.style.backgroundImage= 
              "url('images/test.jpg')" 
              ;

下面给出一个完整的代码实例，使用的背景图片如下:

a:3:{s:3:\"pic\";s:43:\"portal/201711/25/204505z898abioy7warmjt.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

309x99的图片分隔为9份，每一份的长宽分别是103px和33px。

代码实例如下:

     
     

      
      

       
       

        
        
 
            

              01 
            
 
            

              02 
            
 
            

              03 
            
 
            

              04 
            
 
            

              05 
            
 
            

              06 
            
 
            

              07 
            
 
            

              08 
            
 
            

              09 
            
 
            

              10 
            
 
            

              11 
            
 
            

              12 
            
 
            

              13 
            
 
            

              14 
            
 
            

              15 
            
 
            

              16 
            
 
            

              17 
            
 
            

              18 
            
 
            

              19 
            
 
            

              20 
            
 
            

              21 
            
 
            

              22 
            
 
            

              23 
            
 
            

              24 
            
 
            

              25 
            
 
            

              26 
            
 
            

              27 
            
 
            

              28 
            
 
            

              29 
            
 
            

              30 
            
 
            
 
             
 
              <!doctype html> 
             
 
             
 
              < 
              html 
              > 
             
 
             
 
              < 
              head 
              > 
             
 
             
 
              < 
              meta  
              charset 
              = 
              "utf-8" 
              > 
             
 
             
 
              < 
              title 
              >设置背景图片</ 
              title 
              > 
             
 
             
 
              < 
              style  
              type 
              = 
              "text/css" 
              > 
             
 
             
 
              #ant { 
             
 
             
 
                 
              width:400px; 
             
 
             
 
                 
              height:300px; 
             
 
             
 
                 
              background-color:#ccc; 
             
 
             
 
              } 
             
 
             
 
              </ 
              style 
              > 
             
 
             
 
              < 
              script 
              > 
             
 
             
 
              window.onload = function () { 
             
 
             
 
                 
              var odiv = document.getElementById("ant"); 
             
 
             
 
                 
              var obt = document.getElementById("bt"); 
             
 
             
 
                 
              obt.onclick = function () { 
             
 
             
 
                   
              odiv.style.backgroundImage = "url('mytest/demo/mybg.png')"; 
             
 
             
 
                   
              odiv.style.backgroundRepeat = "no-repeat"; 
             
 
             
 
                   
              odiv.style.backgroundPosition = "0px -33px"; 
             
 
             
 
                 
              } 
             
 
             
 
              } 
             
 
             
 
              </ 
              script 
              > 
             
 
             
 
              </ 
              head 
              > 
             
 
             
 
              < 
              body 
              > 
             
 
             
 
              < 
              div  
              id 
              = 
              "ant" 
              ></ 
              div 
              > 
             
 
             
 
              < 
              input  
              type 
              = 
              "button"  
              id 
              = 
              "bt"  
              value 
              = 
              "查看演示" 
              /> 
             
 
             
 
              </ 
              body 
              > 
             
 
             
 
              </ 
              html 
              >

上面的代码实现了使用js设置元素背景的功能，可以看出背景图片会覆盖背景色。

（1）.backgroundImage用来设置背景图片路径。

（2）.backgroundRepeat用来设置背景图片的重复规则。

（3）.backgroundPosition用来设置背景图片的定位。

也可以使用setAttribute()函数实现

Return_KB
关注
专栏目录
javascript设置页面背景色及背景图片的方法
12-28
本文实例讲述了javascript设置页面背景色及背景图片的方法。分享给大家供大家参考，具体如下： <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN> <HTML> <HEAD> <TITLE> New ...
javascript随机显示背景图片的方法
10-24
在了解这个技术点之前，我们需要先了解几个相关的知识点：JavaScript基础语法、JavaScript数组的使用、JavaScript中的随机数生成方法以及HTML中对背景图片的设置。 首先，JavaScript是一种脚本语言，通常用于网页的...
javascript添加背景图片
热门推荐
男儿当自强
09-21 1万+
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here function backImage(){ document.body.style.backgroundImage="URL(ph/1.jpg)"; document.
Vue 关于如何使用 background-image 属性（真的很详细）
(黎子)人生编码
06-25 6311
属性用于设置元素的背景图像。它可以接受一个或多个图像的 URL，以及相关的背景定位、重复、大小和附着方式等属性。
JS中如何设置背景图片？
08-29 4279
方法一： 　　 预先设置好一个样式，当用到的时候，只需要给这个对象添加一个类名就行了。 eg: css中：.bj { background: url(star.jpg) no-repeat center; background-size: cover; } js中： oBox.className = "bj"; 方法二： 直接使用...
p5.js 到底怎么设置背景图？
weixin_39415598的博客
10-27 603
在《p5.js 光速入门》里我们学过加载图片元素，学过过背景色的用法，但当时没提到背景图要怎么使用。本文就把背景图这部分内容补充完整，并且会提到在p5.js里使用背景图的一些注意点。
通过js获取div的background-image属性
10-26
div的background-image这个属性，只是设置它的url，下面为大家介绍下如何获取它的background-image属性，感兴趣的朋友可以参考下
网页如何设置背景图片
12-25
4. **JavaScript设置背景图片**： 使用JavaScript，我们可以动态地改变背景图片。这在响应式设计或者交互效果中很常见。例如，通过修改元素的`style`属性： ```javascript document.body.style.backgroundImage =...
JavaScript实现更换背景图片
10-16
本文将详细介绍如何使用JavaScript来更换网页的背景图片。这一技术实现的基础是通过JavaScript脚本来修改CSS属性，从而达到更新视觉效果的目的。在展示的代码示例中，作者通过HTML和CSS来创建一个图片列表，并通过...
尚硅谷html练习-背景重复
weixin_58264104的博客
07-13 426
尚硅谷html练习-背景重复
js实现按钮加背景图片常用方法
12-11
本文实例讲述了js实现按钮加背景图片常用方法。分享给大家供大家参考。具体实现方法如下： 方法一: 代码如下:<input type=”submit” onMouseOver=”style=background:url(‘imgs/jb51.gif’)”/>   方法二: 代码如下:<input type=”button” value=”提交” style=”background:url(图片地址) no-repeat;border:none;text-indent:-2000px;width:100px;height:30px;”>   方法三: 就是用图片按钮，即： 代码如下:<inp
JS backgroundImage控制
10-29
JS backgroundImage控制代码。
js 改变背景(backgroundImage)和 类名称(class)
09-10
js 改变背景(backgroundImage)和 类名称(class)
【JS】【22】标签的background-image属性
aizhu4795的博客
05-29 685
前言：一般的时候，html页面内，图片是这样写的：<img src="tupian.jpg"/>，有时候前端也会这样写：<img style="backgroundImage:url(tupian.jpg)"/> 正文： 1，修改图片地址 $("#id").css("backgroundImage","url(" + s + ")"); 2，获取图...
js图片预加载
ajb11683的博客
02-18 134
图片预加载有大体有几种方式 1.html标签或css加载图片。 　　显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载。但是为了避免初次载入过多图片影响体验。一般最好在文档渲染完成以后再加载（使用window.onload等）。 2.纯js实现预加载 空城计-Code记的Javascript实现图片的预加载的完整实现的预...
js中 background 的属性 image 和 repeat 的用法
logqq的专栏
09-24 1991
一般情况下  js中得到background的image属性是: document.getElementById("").backgroundImage; 但是：repeat  确不一样 document.getElementById("").background.repeat;
js html添加背景图片,react怎么给div添加背景图片
weixin_35808698的博客
06-26 2168
react.js设置页面div背景图片1. 如何在react js 项目中设置div 背景图片在传统的项目中我们只需要在css文件中定义样式，然后给div添加相应的class即可，但是在react.js中，尤其是在用webpack 搭建的环境中，似乎直接写定义class样式就不太管用了，因为这样的react项目，定义class属性需要用驼峰className={Obj(一个对象)},而定义标签上的...
hbuilderx中添加背景图片
最新发布
09-07
HBuilderX是一款基于WebIDE的前端开发工具，它支持创建网页应用。要在HBuilderX中添加背景图片，你可以按照以下步骤操作： 1. 打开你的项目文件：首先，打开HBuilderX的项目管理器，找到你需要编辑的HTML、CSS或Vue组件文件。 2. 编辑样式表（CSS）：如果你是在编写CSS，可以在`<style>`标签内定义背景图像。例如： ```css .your-selector { background-image: url("path_to_your_image.jpg"); /* 或者 */ background-image: url("/images/background.png"); background-size: cover; /* 可选，默认值通常是auto */ } ``` 这里`.your-selector`需要替换为你想要设置背景图片的实际选择器。 3. HTML元素上应用样式：如果你想为特定HTML元素设置背景图，可以这样写： ```html <div class="your-selector"> <!-- 元素内容 --> </div> ``` 4. 如果你在使用Vue.js，可以在组件的`.vue`文件中，在对应的CSS部分或者 scoped CSS规则里添加背景图片。 5. 保存并预览：完成上述操作后，记得保存文件，并在浏览器的开发者工具或HBuilderX的预览功能中查看效果。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值