blocks|key|4219403|text|您可以使用rgba设置背景div的不透明度。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4219404|.form-container+{+background:+rgba(0,+0,+0,+0.5);+}|code-block|syntax|javascript|4219405|rgba的最后一个参数是alpha值，并控制背景的透明度。|4219406|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can set the opacity of the background div using rgba. For example:</p>

<pre><code>.form-container { background: rgba(0, 0, 0, 0.5); }
</code></pre>

<p>The last parameter for rgba is the alpha value and controls the transparency of the background.</p>


blocks|key|3725455|text|周围的框实际上并不是“看穿”-你会注意到它实际上包含一个模糊版本的页面背景图像，以及一个减轻的效果。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3725456|我觉得以开发时间为代价来实现这一点的最好方法是创建两个背景图像(页面的背景，以及Photoshop中相同的模糊、轻松的版本)，并相应地设置元素的background-image。您可以使用CSS的新calc功能，以帮助保持图像对齐，如果您正在做任何先进的诡计。|offset|length|style|CODE|3725457|更简单的方法是使用CSS的blur过滤器，尽管在web浏览器上CPU的强度要大得多，而且不受几年前浏览器的支持。这里记录了这一点：How+to+apply+a+CSS+3+blur+filter+to+a+background+image|3725458|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image-that-i-am-setting-with-ba^0|0|20|G|2R|4|0|D|4|1T|1I|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@$D|T|E|U|F|G]|$D|V|E|W|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@$D|10|E|11|1|12]]|A|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

<p>The surrounding box is not actually "see through" - you'll notice it actually contains a blurred version of the page's background image in addition to a lightened effect.</p>

<p>I feel the best way to achieve this, at the cost of dev-time, is to create two background images (the page's background, and a blurred, lightened version of the same in Photoshop) and set the <code>background-image</code> of the elements accordingly. You can use CSS's new <code>calc</code> function to help keep the images aligned if you're doing any advanced trickery.</p>

<p>The simpler approach, though considerably more CPU intensive on the web-browser and not supported by browsers older than a few years is to use CSS's <code>blur</code> filter. This is documented here: <a href="https://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image-that-i-am-setting-with-ba">How to apply a CSS 3 blur filter to a background image</a></p>


blocks|key|572710|text|我一直这么做.|type|unstyled|depth|inlineStyleRanges|entityRanges|data|572711|<div+class="overlay">
++<div+class="overlay-content">
++++++<h2>Whatever</h2>
++++++<form></form>
++</div>
</div>|code-block|syntax|javascript|572712|.overlay-content有bg颜色(白色表示亮，黑色到暗)，比如透明值的background-color:+rgba(0,0,0,0.3);。|offset|length|style|CODE|572713|entityMap^0|0|0|0|G|14|Y|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

<p>The way I've always done this has been...</p>

<pre><code>&lt;div class="overlay"&gt;
  &lt;div class="overlay-content"&gt;
      &lt;h2&gt;Whatever&lt;/h2&gt;
      &lt;form&gt;&lt;!-- foo --&gt;&lt;/form&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><code>.overlay-content</code> has a bg color (white to lighten, black to darken) such as <code>background-color: rgba(0,0,0,0.3);</code> with a transparency value.</p>


blocks|key|3725499|text|使用div创建一个background:rgba(+255,+255,+255,+0.3+);，而不是简单地添加输入，这些输入在某种程度上看起来是这样的：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3725500|​|3725501|.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%25;
++++height:+25px;
++++margin-left:+10%25;
++++margin-top:+10px;
}

body+{
++++height:+100%25;
++++width:+100%25;
++++background:url("https://unsplash.imgix.net/photo-1428591501234-1ffcb0d6871f?dpr=2&fit=crop&fm=jpg&q=75&w=1050");
++++background-size:cover;
}|code-block|syntax|javascript|3725502|<div+class="login_wrapper">
++++<h1>Create+Account</h1>
++++<input+type="text"/>
++++<input+type="text"/>
++++<input+type="text"/>
</div>|3725503|3725504|我想你现在明白了。|3725505|entityMap^0|2|3|9|12|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|12|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|S|$]]

<p>Create a <code>div</code> with <code>background:rgba( 255, 255, 255, 0.3 );</code> and than simply add the inputs which than could look somehow like this:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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&amp;fit=crop&amp;fm=jpg&amp;q=75&amp;w=1050");
    background-size:cover;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="login_wrapper"&gt;
    &lt;h1&gt;Create Account&lt;/h1&gt;
    &lt;input type="text"/&gt;
    &lt;input type="text"/&gt;
    &lt;input type="text"/&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>I think you now get the idea.</p>


<p><img src="https://i.stack.imgur.com/io7NH.jpg" alt="http://i.stack.imgur.com/io7NH.jpg"></p>

<p>I want to create a form similar to this on my website. Unfortunately, when I lower the opacity of the div conaining my form elements, the e-mail, password, and text all reduce in opacity as well. How can I make a form like this where only the surrounding box is see-through, but my login elements, title, and buttons are not?</p>


How do I recreate a web form like this without reducing the opacity of form elements?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

​​我想在我的网站上创建一个类似于此的表单。不幸的是，当我降低了包含表单元素的div的不透明度时，电子邮件、密码和文本的不透明度也都降低了。在这样的表单中，只有周围的框是透明的，但登录元素、标题和按钮却不是？

问如何在不降低表单元素的不透明度的情况下重新创建这样的web表单？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在不降低表单元素的不透明度的情况下重新创建这样的web表单？EN