关于Object.style.backgroundPosition

最新推荐文章于 2022-01-19 17:20:07 发布
最新推荐文章于 2022-01-19 17:20:07 发布
阅读量1.9k 收藏
点赞数
分类专栏： JavaScript 文章标签： button div css url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dingherry/article/details/6734158
版权

SOURCE：http://www.w3schools.com/jsref/prop_style_backgroundposition.asp

 

Definition and Usage

The backgroundPosition property sets or returns the position of a background-image within an element.

Syntax

Set the backgroundPosition property:

Object.style.backgroundPosition="position"

Return the backgroundPosition property:

Object.style.backgroundPosition

Tip: The default value for the backgroundPosition property is: 0% 0%.

ValueDescription
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right		If you only specify one keyword, the other value will be "center".
x% y%The x value indicates the horizontal position and the y value indicates the vertical position. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%.
xpos yposThe x value indicates the horizontal position and the y value indicates the vertical position. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and units
inheritThe setting of the background-position property is inherited from the parent element

 

Example

Example

Change the position of the background-image:

<html>
<head>
<style>
div
{
background-image: url('img_tree.png');
background-repeat: no-repeat;
width: 400px;
height: 400px;
border: 1px solid #000000;
}
</style>
<script type="text/javascript">
function displayResult()
{
document.getElementById("div1").style.backgroundPosition="center bottom";
}
</script>
</head>
<body>

<button type="button" οnclick="displayResult()">Position background image</button>
<br />
<div id="div1">
</div>

</body>
</html>

dingherry
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
backgroundPosition的用法
aliven1的博客
04-23 877
background_position属性有四个参数，分别为 上 右 下 左，如果只用两个参数则默认为 是： 上 右，同时 系统默认上下参数和左右参数一致 #div1{width: 200px;height: 200px;position: absolute;left: 50%;margin-left: -100px;top: 0; } </style> </he...
css中background-position的使用
ojb98K的博客
05-24 130
给obj加属性，换背景
转移到 github
06-26 159
   function onclickItem(n,obj){  obj.style.backgroundColor= "#00CCFF"  var isLoaded = obj.getAttribute("isLoaded")  if (isLoaded != "true")       obj.setAttribute ("isLoaded","true")  else    obj.setA...
style中position的属性值具体解释
weixin_34392843的博客
02-19 154
　　　　Position的英文原意是指位置、职位、状态。也有安置的意思。在CSS布局中，Position发挥着非常关键的数据，非常多容器的定位是用Position来完毕。　　Position属性有四个可选值，它们各自是：static、absolute、fixed、relative。我们以下来共同学习它们的不同的使用方法，在学习中我们应该去思考在什么布局情况下，应该使用它们当中的哪一种。　　很多...
我的理解：为什么obj.style.backgroundColor有时候取不到值？
09-10 1328
obj.style.backgroundColor有时候能取到值，有时候取不到，这是为什么呢？看了下面的代码你就知道了。 &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; p {background-color: #ccc} &lt;/style&gt; &lt;/head&gt; ...
万圣节html代码大全.docx
最新发布
11-01
在这个示例中，backgroundPosition被设置为center top，以便将背景图片居中显示。 Margin和Padding margin和padding是CSS样式的两个重要属性，用于设置元素的边距和内边距。在这个示例中，margin属性被用于设置动画...
JS图片放大镜.rar
05-24
magnifier.style.backgroundPosition = `-${magX}px -${magY}px`; }); preview.addEventListener('mouseout', function() { magnifier.style.display = 'none'; // 鼠标离开时隐藏放大镜 }); magnifier....
javascript实现放大镜效果.zip
01-11
largeImage.style.backgroundPosition = `-${largeMouseX}px -${largeMouseY}px`; }); // 鼠标离开小图时，隐藏大图 smallImage.addEventListener('mouseleave', () => { fullscreen.style.display = 'none'; });...
vue 内联样式style中的background用法说明
10-14
backgroundPosition: 'center', backgroundRepeat: 'no-repeat'}"> ``` 这段代码设置了背景图片、居中定位和不重复显示。 四、动态修改样式 在实际应用中，Vue的内联样式常用于根据数据动态改变元素样式。例如，...
07-放大镜特效.rar
06-01
magnifier.style.backgroundPosition = '-' + srcX + 'px -' + srcY + 'px'; magnifier.style.backgroundSize = imgWidth + 'px ' + imgHeight + 'px'; magnifier.style.display = 'block'; // 显示放大窗口 }); ...
如何让PHP中背景图适合页面,javascript如何更改网页背景图片？
weixin_39652760的博客
03-24 89
JavaScript中更改网页背景图片可以通过style对象的backgroundImage属性来实现。语法为Object.style.backgroundImage=url(URL)。JavaScript中随机更改背景图片：1、用JavaScript定义一个图片数组，里面存放你想要随机展示的图片ar imgArr=["//https://img.html.cn/upload/article/00...
HTML如何变换背景图片,javascript如何更改网页背景图片？
weixin_42514433的博客
06-04 2365
JavaScript中更改网页背景图片可以通过style对象的backgroundImage属性来实现。语法为Object.style.backgroundImage=url(URL)。JavaScript中随机更改背景图片：1、用JavaScript定义一个图片数组，里面存放你想要随机展示的图片ar imgArr=["//https://img.html.cn/upload/article/00...
vue2动态修改样式
qq_26780317的博客
01-19 3412
vue 动态的修改样式
使用backgroundPosition来定位背景图片
Love.Hope.Faith
01-15 1766
*{ background:url(背景图片链接) X坐标 Y坐标； } 如题。         这个问题大家一定会遇到。当你在制作网页的时候，一开始的背景图一定是每张图都切出来，一个button的hover效果，要准备两张背景图。这种做法主要有两个缺点：         1.图片在hover的时候会出现切换闪动；         2.如果要修改背景图，需要同时更换图片和修改源
JS中style属性
星星_月亮的光芒
12-13 910
解决办法： 1、先定义一个CSS规则，然后this.className='' 2、document.getElementByIdx_x("a").style.cssText="border-collapse:collapse;border-spacing:1;border:1 solid #0B2565;background-color:white;color:black;text-align
盒子模型的基本概念
weixin_45746803的博客
11-07 4129
简介 CSS （Cascading Style Sheet）可译为“层叠样式表 ”或“级联样式表”，它定义如何显示HTML 元素，用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率。CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSS 围绕这些盒子产生了一种“盒子模型”概念，通...
vue的style方式绑定行内样式-background-image的方式等~
热门推荐
Baby_加油_的博客
01-19 6万+
问题：使用vue加载图片变量，为了图片的自适应，需设置为背景图居中排布 <tr v-for="(item,index) in dataObj"> <td class="video-msg" v-bind:id="item.videoid"> <div class="videoImg fl" v-bind:style="{backgrou...
以下代码为什么没有显示出图片<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #div1 { width: 100%; height: 960px; background-color:rgba(52, 174, 255, 0.208); } .bc1 { background-image: url(img/cloud.jpg); background-size: 100px; /* 图片大小 */ background-repeat: no-repeat; } </style> </head> <body> <div id="div1" class="bc1"></div> <script> function getRandom(min,max) { this.range = Math.floor(Math.random() * (max - min) + min); } var w = new getRandom(100,800); var h = new getRandom(50,700); var bc1 = document.getElementsByClassName('bc1'); bc1.style.backgroundPosition = w.range + 'px ' + ' ' + h.range + 'px'; </script> </body> </html>
07-12
bc1.style.backgroundPosition = w.range + 'px ' + ' ' + h.range + 'px'; ``` `document.getElementsByClassName` 返回的是一个 HTMLCollection 对象，而不是单个元素。因此，你需要通过索引来访问该集合中的元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值