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

如题所述

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

温馨提示:内容为网友见解,仅供参考
第1个回答  2017-06-11

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

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

第2个回答  推荐于2016-06-22

  这位网友你好,可以用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浏览器的。

追问


body{background-image:url(images1/content1.png);background-repeat:no-repeat;background-attachment:fixed;background-position:center;background-size:63px 100px;}

写入background-size后并没有变化

追答

请问你用的是什么浏览器?图片原来大小是多少啊?你先设置一下background-size:100%试试有木有变化。

本回答被提问者和网友采纳
第3个回答  2015-11-18

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

第4个回答  2015-09-24
background-size:63px 100px;

Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景属性。

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

css设置背景图片大小
对于背景图片的导入,可以选择background 或者background-image 格式如下 body{backgroud:url("url")} body{backgroud-image:url("url")} background: url(http:\/\/exp.bdstatic.com\/static\/common-jquery\/widget\/search-box\/img\/logo_83ae7e2.png);背景图片的显示方式: repeat...

怎么用css把背景图片拉伸 不是平铺
body{background:url(bg.jpg) center center;background-size:cover;height:900px;width:100%;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');} 另一种是使用jQuery,在body中动态插入一个div,然后在div里包含一张图片,浏览器视窗改变大小时,动态设...

如何把HTML文件的背景图片设成全屏?
1、最简单方法使用css3.0新增的一个属性background-size,代码如图。IE8以下不支持。2、打开浏览器查看效果如下:3、使用css代码如图。支持IE9+,IE 7\/8: 平铺效果支持,但是在小于1024px的屏幕下居中效果失效。4、然后打开浏览器效果如图所示。5、之后使用jQuery模拟的方法。css代码如图。6、然后jque...

如何使用jquery 动态修改元素的 background-image?
"background-image","url(s)");这样子设置的background-image就是url(s),JavaScript代码当中的s变量并没有如你期望的那样子扩展开来。对JavaScript的运用不熟悉。var s = "images\/" + row + ".jpg";\/\/row是table的当前行 ("body").css("background-image","url(" + s + ")");...

jquery 中怎么用css设置background-image
document.css("background-image","地址")

网页背景边框怎么更改大小?
听起来模模糊糊的...如果要修改显示区域大小,找到这个区域的css,根据新logo的大小修改其中的width和height的数值就行了.

jquery如何改变css背景图?
jquery改变CSS背景图修改方法如果需要使用Jquery修改CSS网页背景样式。用户可以这样写$(‘p’).css({"background-image":"url(..\/images\/msg_btn.gif"});Jquery-CSS用法css() 方法返回或设置匹配的元素的一个或多个样式属性。返回第一个匹配元素的 CSS 属性值。注释:当用于返回一个值时,不支持...

css background-image 显示不完整问题
定义多一个line-height就可以了,你希望一行有多高,line-height就设多大。例如line-height:24px; 这样~还有一个方法,就是在CSS里面加一个选择器:div.tip {clear:both;} 或者 div.tip {display:block} 把它加在.tip样式的后面,这样如果是DIV应用了tip样式的话,就会执行独立成一行的样式,而...

如何使用CSS调整图片大小的实例代码分享
一、固定大小一般,为了限制图片的大小,会使用下面的HTML属性值或CSS属性值来定义:img { width: 600px; height: 500px;}但这样的设置太死板,不够灵活。二、利用CSS属性值img.qtipImg { max-width: 500px; width: 500px; width:expression(this.width > 500 ? "500px" : this.width); overf...

相似回答