当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 可以给img元素设置背景图

CSS样式表
CSS教程:闭合CSS浮动元素的几种方法
细说CSS3中的选择符
网页超级链接该以什么方式打开?
背投广告设计:用最少的时间来做最效率的事情
css中用javascript判断浏览器版本
css教程:经常保持CSS的整洁度和有序性
css教程:选择合适的、有意义的元素描述内容
CSS编写中灵活运行注释的意义
css教程:CSS文件应该保持整洁和统一
DIV CSS常用的网页布局代码
完全掌握纯CSS布局网页
serif和sans serif:西方国家的字母体系
基于XTHML标准的DIVCSS布局对SEO的影响
CSS合理的编码与组织技巧
网站变黑白灰色的4种代码详细讲解
css布局实例:网页布局的方法
YUI 中的 Grids CSS值得关注和学习的
CSS代码是否合理?是否优化?
css教程:网页中Span和Div的区别
div css网页适应不同分辨率技巧

CSS样式表 中的 可以给img元素设置背景图


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 95 ::
收藏到网摘: n/a

惊叹于老外的发现 《CSS Background image on html image element?》,自己从没关注过,也没想过如此的问题。

实现方法很简单:设置 img 元素为块元素(display:block;),并赋一个 padding 值。

点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

复制代码 代码如下:

img {
display:block; b
ackground:url('parallax.gif') no-repeat bottom left;
padding:93px 100px 75px 100px;}

根据上面的原理,举一反三,通过类似的方法,我们还可以给 img 元素设置双边:
复制代码 代码如下:

img {
display:block;
padding:1px;
background:red;
border:1px solid black;
}