【HTML&&CSS】文字设置在HTML和设置在CSS中的图片区别

今天做实验时，发现了这个问题 

建议大家先往下看这个代码的运行效果，然后大家就明白是怎么肥四了😉

!DOCTYPE html>
    
html lang="en">
    
head>
    
  meta charset="UTF-8">
    
  meta http-equiv="X-UA-Compatible" content="IE=edge">
    
  meta name="viewport" content="width=device-width, initial-scale=1.0">
    
  title>
    ikun/title>
    
  style>

    #chicken {
    
      margin: 0 auto;

    }

    .cxk {
    
      height: 400px;
    
      background-repeat: no-repeat;
    
      background-image: url(ikun.png);
//图片设置在CSS里面
    }
    
  /style>
    
/head>
    
body>
    
  div id="chicken">
    
    div>
    img src="ikun.png">
    h2>
    只因1/h2>
    /div>
    //图片设置在HTML里面
    div class="cxk">
    h2>
    只因2/h2>
    /div>
    
  /div>
    
/body>
    
/html>
    

结果

哈哈哈哈哈哈，先让我笑几声

发现

🍔HTML的文字：文字在图片下面

🍔CSS中的文字：文字在图片里面

（小吉认为，应该是所以CSS的选择器加载图片时，图片变成了背景，所以文字会出现在图片里面） 

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！