输入文本时在文本区域中消失的背景图像

Question

我想将图像设置为 HTML 中的textarea标签的背景，然后在用户输入一些文本时使其消失，同时具有新的背景（在这种情况下只是一种颜色）。 我期望的行为类似于placeholder属性发生的行为，但对于背景。 我还发现它对jQuery是可行的，但我没有使用它。
索引.html：

<html>
  <head>
  <link rel="stylesheet" href="style.css">
  <body>
    <textarea id="code"></textarea>
  </body>

样式.css

#code {
  color: white;
  background-color: black;
  background: url(logo.png) center center no-repeat;
}

Answer 1

 #code { color: white; background-color: black; } #code:placeholder-shown { background: url(https://leanfrontiers.com/wp-content/uploads/2018/12/logo-placeholder-png.png) center center no-repeat; } #code:not(:placeholder-shown) { background-color: red; }

 <textarea id="code" placeholder=" "></textarea>

Answer 2

试试这个#code:active { background: none; } #code:active { background: none; }

输入文本时在文本区域中消失的背景图像

问题描述

2 个解决方案

解决方案1
2 已采纳 2021-01-31 13:09:29

解决方案2
0 2021-01-31 13:22:18

输入文本时在文本区域中消失的背景图像

问题描述

2 个解决方案

解决方案1 2 已采纳 2021-01-31 13:09:29

解决方案2 0 2021-01-31 13:22:18

解决方案1
2 已采纳 2021-01-31 13:09:29

解决方案2
0 2021-01-31 13:22:18