css为图片设置背景图片方法

发布时间:2020-05-17编辑:脚本学堂
本文介绍了css代码为图片设置背景图片的方法,为图片设置背景图片,是一个非常搞的实例,有需要的朋友参考下。

css对于元素的表现以及页面的布局,都提供了非常强大的功能。
对于图片的使用,其实更多的是在内容层。根据web标准的思路,表现层的图片,已经都被分离到css中去了。
只有作为内容的图片才能以img标签插入在页面中,这也是一直强调的语义。

为图片设置背景图片,是一个非常搞的实例。
以img标签引入页面的图片设置背景图片。这样的应用范围或许并不大,帮助理解元素在html与css中的意义与灵活性。
代码:
 

<img scr="phpzixue.jpg" />
这是以img标签将图片引入到页面中。

css代码:
 

复制代码 代码示例:
img {
display:block;
width:443px;
height:60px;
padding-bottom:10px;
background:url(bg.jpg) no-repeat left bottom;
}
 

将img元素转换为块元素,设置宽和高。设置下侧的内边距为10px。为背景图片显示出来预留一定的空间。最后定义背景图片即可。
由此小实例,可以看出css的灵活和强大的功能。