搜索

首页  >  文章  >  web前端  >  css奇特用法之 IMG添加背景图片配合显示效果惊艳_html/css_WEB-ITnose

css奇特用法之 IMG添加背景图片配合显示效果惊艳_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:42:401504浏览

  • 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" alt="runner" /></div></body></html>

     

     

    ----转载

    声明：
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    上一篇：基于9款CSS3鼠标悬停相册预览特效_html/css_WEB-ITnose下一篇：移动端开发，几个你可能不知道的CSS单位属性。_html/css_WEB-ITnose

    相关文章

    查看更多