如何让input元素完全透明并显示body背景图而非父元素背景色？

嘿，要实现让input元素完全透明，还能穿透父元素的白色背景显示body的背景图，我们需要调整input的CSS样式，核心是解决背景的继承和定位问题。下面是具体的实现步骤和代码示例：

问题分析 #

默认情况下，input自带默认背景样式，而且它的父元素#wrapper设置了白色背景——如果只给input加background: transparent，只会让它显示父元素的白色背景，根本看不到body的背景图。所以我们得让input的背景直接和body的背景图关联起来。

解决方案代码 #

修改你的CSS部分，添加针对input的样式：

body{ 
  background-image:url("https://upload.wikimedia.org/wikipedia/commons/3/35/Neckertal_20150527-6384.jpg");
  background-attachment: fixed; /* 让body背景图固定，确保input的背景图和它对齐 */
  background-size: cover; /* 可选，让背景图铺满整个视口 */
  margin: 0; /* 移除默认边距，让背景显示更完整 */
}

#wrapper{ 
  background-color: white; 
  height: 100px; 
  padding: 20px; /* 加个内边距，方便看清input的位置 */
  margin: 20px;
}

input[type="text"] {
  /* 第一步：移除input自身的背景和边框，实现完全透明 */
  background-color: transparent;
  border: none; /* 如果需要保留边框，可以改成border: 1px solid transparent; */
  outline: none; /* 移除聚焦时的默认轮廓，可选 */
  
  /* 第二步：设置和body相同的背景图，并固定定位，让它和body背景对齐 */
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/3/35/Neckertal_20150527-6384.jpg");
  background-attachment: fixed;
  background-size: cover; /* 和body的背景保持一致的显示效果 */
  
  /* 可选：调整文字样式，让内容在背景图上更清晰 */
  color: white;
  font-size: 16px;
  padding: 8px;
  width: 200px;
}

对应的完整HTML代码：

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transparent Input with Body Background</title>
<style>
body{ 
  background-image:url("https://upload.wikimedia.org/wikipedia/commons/3/35/Neckertal_20150527-6384.jpg");
  background-attachment: fixed;
  background-size: cover;
  margin: 0;
}

#wrapper{ 
  background-color: white; 
  height: 100px; 
  padding: 20px;
  margin: 20px;
}

input[type="text"] {
  background-color: transparent;
  border: none;
  outline: none;
  
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/3/35/Neckertal_20150527-6384.jpg");
  background-attachment: fixed;
  background-size: cover;
  
  color: white;
  font-size: 16px;
  padding: 8px;
  width: 200px;
}
</style>
</head>
<body>
<div id="wrapper">
<input type="text" placeholder="输入内容试试">
</div>
</body>
</html>

原理说明 #

• background-color: transparent 移除input自身的背景色，消除默认的白色背景。
• 给input设置和body完全相同的background-image，再加上background-attachment: fixed——这个属性会让input的背景图相对于整个浏览器视口定位，而不是input本身或者父元素，所以会和body的背景图完全重合，看起来就像是穿透了父元素的白色背景直接显示body的背景。
• background-size: cover 确保背景图铺满整个input元素，和body的背景显示效果保持一致。

这样处理后，input就会完全透明，并且显示body的背景图，而父元素#wrapper的白色背景依然会正常显示在input之外的区域。

内容的提问来源于stack exchange，提问作者livethecode