可以给img元素设置背景图
2009-04-06 00:00
363 查看
实现方法很简单:设置 img 元素为块元素(display:block;),并赋一个 padding 值。
Image Demo
div {
background: url('http://img.jb51.net/images/blur.jpg') no-repeat top left;
width: 232px;
height: 200px;
}
img {
display: block;
background: url('http://img.jb51.net/images/parallax.gif') no-repeat bottom left;
padding: 93px 100px 75px 100px;
}
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
根据上面的原理,举一反三,通过类似的方法,我们还可以给 img 元素设置双边:
Image Demo
div {
background: url('http://img.jb51.net/images/blur.jpg') no-repeat top left;
width: 232px;
height: 200px;
}
img {
display: block;
background: url('http://img.jb51.net/images/parallax.gif') no-repeat bottom left;
padding: 93px 100px 75px 100px;
}
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
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; }
相关文章推荐
- 可以给img元素设置背景图
- 可以给img元素设置背景图
- 魅族面试的一个问题,img是行内元素,为什么也可以设置框高?
- 内联/块级元素的宽高及margin/padding的说明 |||||| 为何img、input等内联元素可以设置宽、高
- 块级元素和块元素,行内级元素和行内元素 ,置换元素与非置换元素 (img是行内元素,但是可以设置高度,因为他本身具有一定的高度和宽度,是置换元素,所以可以设置高度和宽度)
- img元素设置背景图以及边框
- 【前端攻城狮之路】为何img、input等内联元素可以设置宽、高?——替换元素的引出
- 块级元素和块元素,行内级元素和行内元素 ,置换元素与非置换元素 (img是行内元素,但是可以设置高度,因为他本身具有一定的高度和宽度,是置换元素,所以可以设置高度和宽度)
- 浅谈为何img、input等内联元素可以设置宽高
- 使用CSS给空元素设置背景图片
- MFC 可以设置背景色、字体、字体颜色、透明背景的 Static 静态文本控件
- css 设置元素背景为透明
- 关于行内元素可以设置padding,border的测试
- 关于行内元素可以设置padding,border的测试
- MFC 可以设置背景色、字体、字体颜色、透明背景的 Static 静态文本控件
- 18.雪碧 网页小图片的使用,可以将它们设置到一张大图上,然后用背景距离调控他们出现的位置!
- 客户端浏览器爬虫在爬取动态生成的img元素及动态设置src属性的问题
- 将img设置成div的背景
- 设置<a>元素的背景图像