css中的背景图怎么改变大小

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css中的背景图怎么改变大小相关的知识,希望对你有一定的参考价值。

css中的背景图怎么改变大小,比如一个图片原先大小是700*700, 我现在background:urlpic.jpg中控制图片为200*200,怎么设置啊?好多图呢

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:bodybackground: url(image.jpg) no-repeat;background-size: 200px 200px; 。

3、浏览器运行index.html页面,此时背景图片成功被设定为200*200。

参考技术A

主要有以下几种方法:

1-把图片放在div的背景图里,再利用css3的background-size属性,语法:

background-size: length|percentage|cover|contain;

这个CSS3的属性作用是把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中,如果不使用这个属性,在IE11和FireFox中缩放浏览器,背景图片会随之缩小,同时使用-webkit-background-size: cover和-o-background-size: cover兼容webkit内核浏览器和Opera浏览器;background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动,当设置为fixed时页面的其余部分滚动时,背景图像不会移动。


2-如果是有规律变化的图,可以将图片单独切出来,然后repeat-x或者repeat-y进行平铺,也是一个不错的方法,而且图片可以切得不用那么大,也对图片进行充分利用。


3-将图片写在img标签里,然后对图片和div进行相对定位/绝对定位,效果是图片尺寸不会随浏览器缩放而变化,但是如果有竖直滚动条时,图片不会固定而会随滚动条移动。只需要把图片的宽度width设置成100%就行了。 

参考技术B CSS2.1 之前是不能设置背景图大小的,CSS3就可以通过background-size来设定图片大小,可以是像素或者是百分比,如background-size:100px 200px;表示把背景图片大小调整为100x200px,目前IE只有IE9支持这个属性,其它主流浏览器也都支持 参考技术C 这得用到CSS3的知识。
background-size:200px 200px;
-moz-background-size:200px 200px;
-moz-background-size:200px 200px;

-o-background-size:200px 200px;

或者你可以用photoshop把图片变小一点。

也可以把背景图片转化为<img src="#" />,这样的话就可以<img src="#" width="200" height="200" />追问

貌似不当用,我知道ps可以处理,但是好多图片呢,如果都ps太麻烦了,你看我这样写对不

只是没效果

追答

在IE中是没效果的

本回答被提问者采纳
参考技术D

  css中的背景图控制大小的方法:

    我们在HTML布局时候直接在图片img标签加宽度和高度属性即可控制图片高和宽

    还可以用CSS样式控制width、height,如:imgwidth:150px;height:60px

    CSS设置IMG图片宽度和高度,如:.divcss5 img width:300px; height:100px

    【注意】控制背景图片的方法有很多,只要活学活用即可完美解决问题。

chart.js 雷达图怎么修改背景颜色

参考技术A var polarData = [

value: 300,
color:"#这里是改背景颜色",
highlight: "#FF5A5E",
label: "Red"
,

value: 50,
color: "#这里是改背景颜色",
highlight: "#5AD3D1",
label: "Green"


];

window.onload = function()
var ctx = document.getElementById("chart-area").getContext("2d");
window.myPolarArea = new Chart(ctx).PolarArea(polarData,
responsive:true
);
;本回答被提问者采纳

以上是关于css中的背景图怎么改变大小的主要内容,如果未能解决你的问题,请参考以下文章

css中如何调整插入背景图片的大小

改变ALTIUM DESIGNER原理图在WORD中的背景颜色

背景图怎么等比例缩放?

如何用css使一个用绝对定位的图片定位在网页一个具体位置,不随网页大小等改变位置!

chart.js 雷达图怎么修改背景颜色

怎样在JFrame中设置背景图片