简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

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

WBOY
Release： 2016-06-24 11:42:40
Original
1498 people have browsed it

  • 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>
    Copy after login

    ----Reprinted

    Related labels：
    css奇特用法之 IMG添加背景图片配合显示效果惊艳
    source：php.cn
    Previous article：Based on 9 CSS3 mouseover album preview effects_html/css_WEB-ITnose Next article：Mobile terminal development, several CSS unit properties you may not know. _html/css_WEB-ITnose
    Statement of this Website
    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
    Latest Articles by Author
    Latest Issues
    function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
    From 2024-04-29 11:01:01
    0
    2
    1810
    How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
    From 2024-04-23 00:22:19
    0
    10
    1963
    The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
    From 2024-04-19 15:37:47
    0
    1
    1660
    There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
    From 2024-04-18 23:52:34
    0
    1
    1563
    Where is the courseware about CSS mind mapping? Courseware
    From 2024-04-16 10:10:18
    0
    0
    1592
    Related Topics
    More>
    Popular Recommendations
    Popular Tutorials
    More>
    Related Tutorials
    Popular Recommendations
    Latest courses
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn：Public welfare online PHP training，Help PHP learners grow quickly！