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

html-css021

css中如何调整插入背景图片的大小,第1张

CSS2.1 之前是不能设置背景图大小的,CSS3就可以通过background-size来设定图片大小,可以是像素或者是百分比。

例如background-size:100px 200px表示把背景图片大小调整为100x200px。

要把图像应用成为背景,要使用 background-image这一 属性。当background-image 属性默认值是 none的时候,这表示背景上没有放置任何图像。如果需要设置一个背景图像,必须为这个属性设置一个 URL 值。

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

不知道家有没有遇到过这样的情况:在CSS控制图片大小时,如果把图片的宽度写死,比如 img{width:500px} ,固然,如果图片宽度大于500px可以很好的控制它不让它过大,但如果图片宽度小于500px,比如说只有100px时,刚才的写法会把这张图扩大5倍显示,显然,这不是我们想看到的。 那么,CSS如何可以区分对待这些图片设置大小呢?很简单,请看: 复制代码 代码如下:img{width:expression(this.width>500?"500px":this.width+"px")} 只要在CSS运用这段代码,就可以分别控制大图片与小图片。它的意思就是,如果图片宽度大于500px,那么图片就以500px的大小显示,如果小于的话,那么图片就按照原有尺寸显示!怎么样,是不是确实很简单? 弊端:增加客户端的负荷,一般用js实现的比较多。

一定要去除img标签里的style属性,为img标签分配一个class属性或者id,然后在css里写入width:100%height:100%这个百分比自己随意写,重点是img标签的父节点是这个div,这个class=“pic”的div一定要设置width和height,随意写,图片就会跟随div大小而变化了