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

html-css011

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

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

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

2、其次,在index.html中的<style>标签中,输入css样式代码:body {background: url(image7.jpg) no-repeatbackground-size: 250px}。

3、最后,浏览器运行index.html页面,此时用CSS强制了图片占用250px宽度的大小并且是等比例自动缩放。

1、css控制图片大小,参考如下代码:

div img {

max-width:600px

width:600px

width:expression(document.body.clientWidth>600?"600px":"auto")

overflow:hidden

}

2、代码说明:

 ◎ max-width:600px在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。

 ◎ width:600px在所有浏览器中图片的大小为600px

 ◎ 当图片大小大于600px,自动缩小为600px。在IE6中有效。

 ◎ overflow:hidden超出的部分隐藏,避免控制图片大小失败而引起的撑开变形。