JavaScript设置背景图片

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

核心代码片段如下:

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

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

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

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

代码实例如下:

<!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()函数实现

JavaScript设置背景图片相关推荐

为canvas画布动态设置背景图片
为canvas画布动态设置背景图片关键是将canvas和img标签放到同一个盒子里,盒子设置相对位置,并且canvas和img需要设置相同的相对位置 <div class="list ...
php设置背景图片的代码,css设置背景图片如何实现？（代码实例）
本篇文章给大家带来的内容是关于css设置背景图片如何实现?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 很多人提交表单时都喜欢用一个图片来作为提交按钮,大多数人可能用J ...
CocoStudio 0.2.4.0 UI编辑器下根Panel控件设置背景图片时一个BUG
我使用的编辑器是0.2.4.0,其实明几天就发现这个问题.在最顶层的Panel设置背景图片时无法再在File一行通过普通的方法(如大家所知,在此行上单击右键选择"重置为默认值") ...
解决IE8,7下设置背景图片 background-size 不支持问题
解决IE8,7下设置背景图片 background-size 不支持问题参考文章: (1)解决IE8,7下设置背景图片 background-size 不支持问题 (2)https://www.cn ...
background-position—CSS设置背景图片的位置
background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-posit ...
设置背景图片，解决手机上背景图片高度适应问题
设置背景图片,解决手机上背景图片高度适应问题第一种方法:直接对图片进行设置,代码如下 <img src="url" class="PhoneBack"& ...
java主界面设置背景图片_java 窗体设置背景图片问题?(附上登陆界面代码，我想加个背景图片，求大神帮忙改改)...
java 窗体设置背景图片问题?(附上登陆界面代码,我想加个背景图片,求大神帮忙改改) 关注:223 答案:4 mip版解决时间 2021-01-26 22:09 提问者非莪莫属 2021-01 ...
echarts热力背景图_Echarts 图表中设置背景图片
在项目开发过程中,遇到在Echarts图表上添加背景图的需求,通过查找Echarts官网的配置项,发现 graphic 能够实现在图表中设置背景图片. image 在Echarts的实例中,找到一个实 ...
JFreeChart设置背景图片 .
freechart= ChartFactory.createTimeSeriesChart("图", "", "",dataset, tru ...
设置背景图片模糊，内容不模糊
设置背景图片模糊,内容不模糊需求:一个div设置了background-image,现在需要使背景模糊,div内的文字清晰显示. 解决方法:内容和图片分别置于一个div,通过css设置背景div模糊 ...

JavaScript设置背景图片

JavaScript设置背景图片相关推荐

最新文章

热门文章