JavaScript设置背景图片

2023-07-28 03:50| 来源: 网络整理| 查看: 265

本章节通过代码实例介绍一下如何利用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 设置背景图片 #ant { width:400px; height:300px; background-color:#ccc; } 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"; } }

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

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

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

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

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

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章