Question

我尝试以HTML格式编写网站，我需要在输入文本后面查看我的背景图片，例如搜索。我能做什么？我尝试设置图像背景但是当我添加输入文本时它是白色的，我无法看到背后的bg图像

<html>
 <head>
  <style>
    body {
    background-image: url(example url}#weap{display:inline;}

  </style>
 </head>
 <body>
  <div id="wrap">
   <input id="search" name="search" type="text" placeholder="What're we looking for ?">
  </div>
 </body>
</html>

Answer 1

您可以将opacity添加到搜索字段中。例如：

#search{
  opacity: .7;
  filter: alpha(opacity=70); /* For IE8 and earlier */
}

Answer 2

尝试使用这样的样式：

input {
   opacity: 0.3;
}

Answer 3

Reduce opacity of input field, so that the background image will get visible through the input field,
in your case use below code

#search{
   opacity:0.5;
   outline: none;
   webkit-appearance: none;
}

Here is the reference for learning more about Opacity attribute:
[link]:https://www.w3schools.com/cssref/css3_pr_opacity.asp

Answer 4

#search{
position: relative;
z-index: 999999;
opacity: 0.3;
}

我怎样才能看到html中的inpute文本中的背景图像？

4 个答案: