您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 图片特效 >

    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>

    CSS奇特用法:为IMG设置背景图片由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/pic/6532.html
    标签:网站源码