网站背景图和banner图怎样做成自适应?css怎么改?

html-css019

网站背景图和banner图怎样做成自适应?css怎么改?,第1张

背景图宽度自适应方法:

添加css样式background-size: 100%它的意思是规定背景图像的尺寸,但这个css样式使用时需要注意,有些浏览器是不支持,比如IE要求9+的版本才可以支持。

banner图自适应方法差不多,也是把图的宽度设置为百分比,容器的宽度依照窗口大小来设为百分比:

对图片添加宽度,因为不是背景图,所以对img添加css:

img {

width: 100%

}

以上,希望对你有帮助,如果我没有说明白,可以追问。

css里面的图片路径应该相对于该css文件,我估计你的文件夹结构应该是

root

|--css

|--index.css

|--images

|--logobg_blue.gif

|--***.html

如果是这样,你css里面的路径应该写成background-image:url(../images/logobg_blue.gif)

还有一个办法就是你用firefox的firebug插件,看看你的index.css到底有没有加载到你的图片

CSS中,可以用伪类来改变背景图片,一般有几种状态:

a:link 未访问时候的状态

a:hover 鼠标放上去时候的状态

a:visited  已访问的状态

a:active  鼠标按下去时候的状态

你只要根据这几点来写就可以,你要点击后改变背景,可以这样写:

a:link{background:url(原来的图片) no-repeat}

a:visited{background:url(点击过的图片) no-repeat}

CSS(层叠样式表)级联样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。