如何在不降低表单元素的不透明度的情况下重新创建这样的web表单？
如何在不降低表单元素的不透明度的情况下重新创建这样的web表单？
提问于 2015-04-18 00:35:22
我想在我的网站上创建一个类似于此的表单。不幸的是，当我降低了包含表单元素的div的不透明度时，电子邮件、密码和文本的不透明度也都降低了。在这样的表单中，只有周围的框是透明的，但登录元素、标题和按钮却不是？
回答 4
Stack Overflow用户
回答已采纳
发布于 2015-04-18 01:02:10
使用div创建一个background:rgba( 255, 255, 255, 0.3 );，而不是简单地添加输入，这些输入在某种程度上看起来是这样的：
.login_wrapper {
width:300px;
height:375px;
background: rgba( 255, 255, 255, 0.3 );
margin:0 auto;
}
.login_wrapper h1 {
padding-top:30px;
text-align:center;
color:#fff;
}
.login_wrapper input[type=text] {
width:80%;
height: 25px;
margin-left: 10%;
margin-top: 10px;
}
body {
height: 100%;
width: 100%;
background:url("https://unsplash.imgix.net/photo-1428591501234-1ffcb0d6871f?dpr=2&fit=crop&fm=jpg&q=75&w=1050");
background-size:cover;
}<div class="login_wrapper">
<h1>Create Account</h1>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</div>
我想你现在明白了。
Stack Overflow用户
发布于 2015-04-18 00:40:07
您可以使用rgba设置背景div的不透明度。例如：
.form-container { background: rgba(0, 0, 0, 0.5); }rgba的最后一个参数是alpha值，并控制背景的透明度。
Stack Overflow用户
发布于 2015-04-18 00:41:24
周围的框实际上并不是“看穿”-你会注意到它实际上包含一个模糊版本的页面背景图像，以及一个减轻的效果。
我觉得以开发时间为代价来实现这一点的最好方法是创建两个背景图像(页面的背景，以及Photoshop中相同的模糊、轻松的版本)，并相应地设置元素的background-image。您可以使用CSS的新calc功能，以帮助保持图像对齐，如果您正在做任何先进的诡计。
更简单的方法是使用CSS的blur过滤器，尽管在web浏览器上CPU的强度要大得多，而且不受几年前浏览器的支持。这里记录了这一点：How to apply a CSS 3 blur filter to a background image
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29711535
复制相关文章
相似问题
腾讯云开发者
