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

 我来答
啦啦啦额68
2019-09-23 · TA获得超过2867个赞
知道答主
回答量:130
采纳率:0%
帮助的人:3.2万
展开全部

在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>

黑马程序员
2017-06-11 · 改变中国IT教育,我们正在行动
黑马程序员
黑马程序员为大学毕业后,有理想、有梦想,想从事IT行业的年轻人改变自己的命运。黑马程序员成就IT黑马
向TA提问
展开全部

一、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的效果的浏览器截图:

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

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
言言言小鱼

推荐于2016-06-22 · 小小的鱼儿小小的我,我就是言小鱼。
言言言小鱼
采纳数:1335 获赞数:7608

向TA提问 私信TA
展开全部

  这位网友你好,可以用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

更多追问追答
追问
在CSS里面用了,background-size没有效果啊
追答
代码贴出来看看,这个是不支持老版本IE浏览器的。
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
lyz810
2015-11-18 · 知道合伙人互联网行家
lyz810
知道合伙人互联网行家
采纳数:7531 获赞数:31778
前端开发工程师

向TA提问 私信TA
展开全部

使用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将为每个浏览器返回它需要的正确值。

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
shaohuabaishuo
2015-09-24 · TA获得超过307个赞
知道答主
回答量:119
采纳率:100%
帮助的人:29.9万
展开全部
background-size:63px 100px;

Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景属性。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(3)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式