blocks|key|811810|text|使用rgba()|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|811811|.transparent+{
++background-color:+rgba(255,255,255,0.5);
}|code-block|syntax|javascript|811812|这将为您提供50%25的不透明度，而框的内容将继续保持100%25的不透明度。|811813|如果你使用opacity:0.5，内容会和背景一样褪色。因此，不要使用它。|811814|entityMap^0|2|6|0|0|0|5|B|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

Use <code>rgba()</code>:

<pre><code>.transparent {
 background-color: rgba(255,255,255,0.5);
}
</code></pre>

This will give you 50% opacity while the content of the box will continue to have 100% opacity.

If you use <code>opacity:0.5</code>, the content will be faded as well as the background. Hence do not use it.

blocks|key|1026686|text|这是可行的，但是包含这个类的元素的所有子元素也将变得透明，而不会有任何方法阻止它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1026687|.css-class-name+{
++++opacity:0.8;
}|code-block|syntax|javascript|1026688|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This works, but all the children of the element with this class will also become transparent, without any way of preventing that.

<pre><code>.css-class-name {
 opacity:0.8;
}
</code></pre>

blocks|key|1026719|text|如果你想使透明的背景是灰色的，请尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1026720|+++.transparent{
+++++++background:rgba(1,1,1,0.5);
+++}|code-block|syntax|javascript|1026721|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you want to make transparent background is gray, pls try:

<pre><code> .transparent{
 background:rgba(1,1,1,0.5);
 }
</code></pre>

blocks|key|1026671|text|请勿使用1x1半透明的PNG。将PNG大小调整为10x10、100x100等。(我使用的是200x200PNG，它只有0.25kb，所以这里并不关心文件的大小。)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1026672|在浏览完这篇文章后，我用3，1x1不同透明度的PNG创建了我的网页。|1026673|Dreamweaver+CS5表现不佳。我正在闪回DOS！显然，任何时候我试图滚动，插入文本，基本上做任何事情，DW试图重新加载半透明区域，一次1x1像素……呀！|1026674|Adobe技术支持甚至不知道问题是什么，但告诉我重建文件(顺便说一句，它在他们的系统上有效)。只有当我将第一个透明的PNG加载到css文件中时，文档才再次深入。|1026675|然后我在另一个帮助网站上找到了一篇关于PNG使Dreamweaver崩溃的帖子。放大你的PNG；这样做没有什么坏处。|1026676|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|N|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|O|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

DO NOT use a 1x1 semi transparent PNG. Size the PNG up to 10x10, 100x100, etc. Whatever makes sense on your page. (I used a 200x200 PNG and it was only 0.25 kb, so there's no real concern over file size here.)

After visiting this post, I created my web page with 3, 1x1 PNGs with varying transparency. 

Dreamweaver CS5 was tanking. I was having flash backs to DOS!!! Apparently any time I tried to scroll, insert text, basically do anything, DW was trying to reload the semi transparent areas 1x1 pixel at a time ... YIKES!

Adobe tech support didn't even know what the problem was, but told me to rebuild the file (it worked on their systems, incidentally). It was only when I loaded the first transparent PNG into the css file that the doc dove deep again.

Then I found a post on another help site about PNGs crashing Dreamweaver. Size your PNG up; there's no downside to doing so.

blocks|key|1026809|text|虽然已经过时了，但在这个帖子上没有一个答案可以通用。使用rgba创建透明颜色蒙版-这并不能确切地解释如何对背景图像执行此操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1026810|我的解决方案适用于背景图像或彩色背景。|1026811|​|1026812|#parent+{
++++font-family:+'Open+Sans+Condensed',+sans-serif;
++++font-size:+19px;
++++text-transform:+uppercase;
++++border-radius:+50%25;
++++margin:+20px+auto;
++++width:+125px;
++++height:+125px;
++++background-color:+#476172;
++++background-image:+url('https://unsplash.it/200/300/?random');
++++line-height:+29px;
++++text-align:center;
}

#content+{
++++color:+white;
++++height:+125px+!important;
++++width:+125px+!important;
++++display:+table-cell;
++++border-radius:+50%25;
++++vertical-align:+middle;
++++background:+rgba(0,0,0,+.3);
}|code-block|syntax|javascript|1026813|<h1+id="parent"><a+href=""+id="content"+title="content"+rel="home">Example</a></h1>|1026814|1026815|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

Although dated, not one answer on this thread can be used universally. Using rgba to create transparent color masks - that doesn't exactly explain how to do so with background images. 

My solution works for background images or color backgrounds. 

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#parent {
 font-family: 'Open Sans Condensed', sans-serif;
 font-size: 19px;
 text-transform: uppercase;
 border-radius: 50%;
 margin: 20px auto;
 width: 125px;
 height: 125px;
 background-color: #476172;
 background-image: url('https://unsplash.it/200/300/?random');
 line-height: 29px;
 text-align:center;
}

#content {
 color: white;
 height: 125px !important;
 width: 125px !important;
 display: table-cell;
 border-radius: 50%;
 vertical-align: middle;
 background: rgba(0,0,0, .3);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1 id="parent"&gt;&lt;a href="" id="content" title="content" rel="home"&gt;Example&lt;/a&gt;&lt;/h1&gt;</code></pre>
</div>
</div>

blocks|key|1026923|text|div.main{
+++++width:100%25;
+++++height:550px;
+++++background:+url('https://images.unsplash.com/photo-1503135935062-
+++++b7d1f5a0690f?ixlib=rb-enter+code+here0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cf4d0c234ecaecd14f51a2343cc89b6c&dpr=1&auto=format&fit=crop&w=376&h=564&q=60&cs=tinysrgb')+no-repeat;
+++++background-position:center;
+++++background-size:cover+
}
+div.main>div{
+++++width:100px;
+++++height:320px;
+++++background:transparent;
+++++background-attachment:fixed;
+++++border-top:25px+solid+orange;
+++++border-left:120px+solid+orange;
+++++border-bottom:25px+solid+orange;
+++++border-right:10px+solid+orange;
+++++margin-left:150px+
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1026924|​|unstyled|1026925|📷|atomic|offset|length|1026926|1026927|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/a64ce20af9e7ad0aec871925df8b3af6.png|imageAlt^0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$]]|$1|G|3|H|5|I|7|X|8|@]|9|@$J|Y|K|Z|1|10]]|A|$]]|$1|L|3|E|5|F|7|11|8|@]|9|@]|A|$]]|$1|M|3|-4|5|F|7|12|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T|U|-4]]]]

<pre><code>div.main{
 width:100%;
 height:550px;
 background: url('https://images.unsplash.com/photo-1503135935062-
 b7d1f5a0690f?ixlib=rb-enter code here0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=cf4d0c234ecaecd14f51a2343cc89b6c&amp;dpr=1&amp;auto=format&amp;fit=crop&amp;w=376&amp;h=564&amp;q=60&amp;cs=tinysrgb') no-repeat;
 background-position:center;
 background-size:cover 
}
 div.main&gt;div{
 width:100px;
 height:320px;
 background:transparent;
 background-attachment:fixed;
 border-top:25px solid orange;
 border-left:120px solid orange;
 border-bottom:25px solid orange;
 border-right:10px solid orange;
 margin-left:150px 
}
</code></pre>

<img src="https://i.stack.imgur.com/yh8kh.png" alt="enter image description here">

blocks|key|1026953|text|这是简单和排序的。如下所示使用hsla+css函数|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1026954|.transparent+{
+++background-color:+hsla(0,0%25,4%25,.4);
}|code-block|syntax|javascript|1026955|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is simple and sort. Use hsla css function like below
<pre><code>.transparent {
 background-color: hsla(0,0%,4%,.4);
}
</code></pre>

blocks|key|1026590|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1026591|.transparent
{+
++opacity:.50;
++-moz-opacity:.50;+
++filter:alpha(opacity=50);+
}|code-block|syntax|javascript|1026592|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this:

<pre><code>.transparent
{ 
 opacity:.50;
 -moz-opacity:.50; 
 filter:alpha(opacity=50); 
}
</code></pre>

I need to make a white background 50% transparent without affecting anything else. How do I do it?

How do I make a semi transparent background?

我需要使白色背景50%透明，而不影响其他任何东西。我该怎么做呢？

问如何制作半透明的背景？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何制作半透明的背景？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何制作半透明的背景？
EN