微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css3 – 如何在透明div上设置html输入字段透明?

我有一个div设置透明与rgba并希望在该div上输入字段也具有透明背景.问题是输入字段背景不呈现透明.
如果我使用不透明度,它可以工作:0.8;在div而不是文本是透明的,所以我需要rgba.
对于透明div rgba之外的第二个输入字段.

这是我的示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Insert title here</title>

<style type="text/css">

.term {
background-color: rgba(0,0.8);
color: #5fba3d;
width: 200px;
height: 100px;
}

input {
background-color: rgba(0,0.8);
color: #FFF;
border: none;
}

</style>

</head>

<body>

<div style="background-color:yellow; width:300px;">

   <div class="term">
      Input 1 <input type="text" value="Test" />
   </div>

   <br />

   <input type="text" value="Input 2" />

</div>

</body>
</html>

有任何想法吗?

谢谢!

拿但业

解决方法

嘿Nathaneal,如果我改变rgba值,它的工作正常,所以文字不会透明
input {
background-color: rgba(0,0.1);
color: red;
border: none;
}

我希望这能帮到您…
你可以看到演示: –
http://jsbin.com/avupaw/16/edit#html,live

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效
js如何实现文字闪烁特效?(图文+视频)
CSS3怎么实现背景颜色渐变?(图文+视频)
Css3如何实现文本溢出隐藏并显示省略号效果
添加CSS的三种方式