今天做实验时，发现了这个问题
建议大家先往下看这个代码的运行效果，然后大家就明白是怎么肥四了😉
<!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的选择器加载图片时，图片变成了背景，所以文字会出现在图片里面）
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)