檬味博客 » 问答 » CSS或jquery中如何改变background-image的大小？

CSS或jquery中如何改变background-image的大小？

在css中改变background-image的大小可以通过将背景图片放置的一个div样式中，然后设置div的样式属性来实现。示例核心代码：div{ background:url(图片路径);background-size:800px 600px;background-repeat:no-repeat;}其中图片路径可以使用相对路径也可以使用绝对路径，不用添加双引号。最后一行的background-...
CSS或jquery中如何改变background-image的大小？
　　这位网友你好，可以用background-size来控制背景图的大小。
　　举例：
div{background:url(img_flwr.gif);background-size:80px 60px;background-repeat:no-repeat;}　　可参考网站：http://www.w3school.com.cn/cssref/pr_background-size.asp
2015-03-10
在css中改变background-image的大小可以通过将背景图片放置的一个div样式中，然后设置div的样式属性来实现。示例核心代码：
div{
background:url(图片路径);
background-size:800px 600px;
background-repeat:no-repeat;
}其中图片路径可以使用相对路径也可以使用绝对路径，不用添加双引号。最后一行的background-repeat:no-repeat意思可不允许背景图片在网页中平铺，只能使用一次。

扩展资料：
通过jquery中改变background-image的大小的实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
$('.box').CSS('backgroundSiz','300px 500px')
}
</script>
<style type="text/css">
.box{
background-image: url(1.png);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
2019-09-23
一、HTML+CSS布局：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>改变背景图大小</title><script src="jquery-1.12.2.js"></script><script type="text/javascript">window.onload = function (){$('#btn').on('click',function (){$('.box').css('backgroundSize','300px 150px');});}</script><style type="text/css">.box {width: 700px;height: 350px;border: 1px solid #000;background: url(pic.jpg) no-repeat;/*background-size: 300px 120px;*/}</style></head><body><div class="box"></div><button id="btn">按钮</button></body></html>
二、在开发工具里面的截图：

三、未添加JS的效果的浏览器截图：

四、添加样式的浏览器的截图：

2017-06-11
使用jQuery修改css的background相关属性的方法：
$('#test').css('backgroundImage', 'url(bg.png)');$('#test').css('background-image', 'url(bg.png)');以上两种写法都可以改变background-image属性
遇到带连字符-的属性可以将属性改为驼峰式，或直接使用带连字符的属性，二者都支持
扩展：
css函数详细用法：
css()获取匹配元素集合中的第一个元素的样式属性的计算值 或 设置每个匹配元素的一个或多个CSS属性。
.css()方法可以非常方便地获取匹配的元素集合中第一个元素的样式属性的计算值，对于某些属性而言，浏览器访问样式属性的方式是不同的，该方法对于取得这些属性是非常方便的(例如，某些属性在标准浏览器下是通过的getComputedStyle() 方法取得的，而在Internet Explorer下是通过currentStyle 和 runtimeStyle属性取得的)并且，某些特定的属性，不同浏览器的写法不一。举个例子， Internet Explorer的DOM 将float 属性写成 styleFloat实现，W3C标准浏览器将float 属性写成cssFloat。 为了保持一致性，您可以简单地使用"float"，jQuery将为每个浏览器返回它需要的正确值。
2015-11-18
background-size:63px 100px;

Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景属性。2015-09-24
mengvlog 阅读 11 次 更新于 2025-06-20 01:04:37 我来答关注问题0
5 个回答檬味博客专题活动
  • 宸辰游艺策划 在jQuery中动态修改和切换CSS有几种

    要动态修改元素的CSS属性，可以使用$.css()方法。例如，如果你想要改变一个元素的背景颜色，可以使用如下代码：$("").css("background-color", "red"); 这行代码会将指定元素的背景颜色设为红色。若需要一次性设置多个CSS属性，可以将属性名和对应的值封装在一个对象中，然后传给$.css()方法。比...

  • shaohuabaishuo CSS或jquery中如何改变background-image的大小?

    在css中改变background-image的大小可以通过将背景图片放置的一个div样式中，然后设置div的样式属性来实现。示例核心代码：div{ background:url(图片路径);background-size:800px 600px;background-repeat:no-repeat;}其中图片路径可以使用相对路径也可以使用绝对路径，不用添加双引号。最后一行的background-...

  • 海南加宸 如何使用jquery控制CSS样式,并且取消Css样式

    以上示例中，点击按钮会动态地为input元素应用或移除指定的CSS类，从而改变其外观。当然，这只是一个简单的例子，你可以根据具体需求扩展使用范围，例如，为不同的元素添加不同的CSS类，或者根据用户的交互行为动态地改变样式。除了简单的类添加和移除之外，jQuery还提供了更多功能强大的方法来操作CSS样式。

  • 腾云新分享 jquery如何获取多个同id的div,然后修改css属性左边间距left的值

    通过这个选择器，你可以批量修改这些元素的CSS属性。比如，如果你想把它们的left属性设置为200px，可以使用如下代码：$(".div_class").css("left","200px")。如果你希望在点击这些元素时动态改变它们的left属性，你可以将click事件绑定到它们身上。例如，如果你想在点击时将left属性设置为200px，可以使...

  • 翡希信息咨询 你好,请问怎么用javascript控制 css呢,就像动态的改变html一样,怎么样动态的改变css呢,谢谢了哦

    1. 使用原生JavaScript 通过修改元素的style属性：你可以直接通过JavaScript访问HTML元素的style属性，并修改其CSS样式。例如：javascriptvar element = document.getElementById;element.style.backgroundColor = 'red'; 通过修改class属性：你还可以通过改变元素的class属性，来应用或移除CSS类，这些类在CSS文件...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部