当前位置:首页 > 网页特效 > 图片特效 >

CSS奇特用法:为IMG设置背景图片

时间:2013-12-26 09:05 来源:互联网 作者:源码搜藏 收藏 推荐

运行代码 保存代码 复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
  • IMG标签本身是显示图片的,但通过CSS可以再为其设置背景图片,让其和自身的图片配合来显示,最终的效果会让你惊叹。当然,这个发现来自于老外,所以代码马上与大家分享。再此之前,我也从来没有想到过这个思路,我想这种思路可以应用的地方相当多了。
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <title>CSS奇特用法:为IMG设置背景图片</title>
    <style type="text/css">
    div {
    background: url('http://www.codefans.net/jscss/demoimg/201312/blur.jpg') no-repeat top left;
    width:232px;height: 200px;  }
    img {display:block;background: url('http://www.codefans.net/jscss/demoimg/201312/parallax.gif') no-repeat bottom left;
    padding: 93px 100px 75px 100px;
    }
    </style>
    </head>
    <body>
    <div>
    <img src="http://www.codefans.net/jscss/demoimg/201312/Anime_runner.gif" />
    </div>
    </body>
    </html>

由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-pic/6532.html

图片特效下载排行

最新文章