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

简介: 【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的选择器加载图片时,图片变成了背景,所以文字会出现在图片里面)


相关文章
|
1天前
|
前端开发
css实现动态旋转图片,
css实现动态旋转图片,
4 0
|
2天前
|
前端开发 数据安全/隐私保护
利用 HBuilderX 设置CSS样式会员注册页面
利用 HBuilderX 设置CSS样式会员注册页面
10 1
|
2天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
18 0
HTML5/CSS3粒子效果进度条代码
|
2天前
|
前端开发 容器
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
9 1
|
2天前
|
前端开发
css设置内嵌样式阴影
css设置内嵌样式阴影
11 0
|
2天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
27 1
|
2天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
2天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
2天前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
2天前
|
前端开发 JavaScript
使用html+css+javaScript 完成计算器
使用html+css+javaScript 完成计算器