search

Home >Web Front-end >HTML Tutorial >Strange usage of css: IMG adds background image to match the display effect_html/css_WEB-ITnose

Strange usage of css: IMG adds background image to match the display effect_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:42:401548browse

  • The IMG tag itself displays images, but through CSS, you can set a background image for it and display it in conjunction with its own image. The final effect will amaze you. Of course, this discovery comes from a foreigner, so the code will be shared with everyone immediately. I had never thought of this idea before. I think this idea can be applied in many places. 

    • <!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>

    ----Reprinted

    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：Based on 9 CSS3 mouseover album preview effects_html/css_WEB-ITnoseNext article：Based on 9 CSS3 mouseover album preview effects_html/css_WEB-ITnose

    Related articles

    See more