rgba和opacity_opacity和rgba有什么区别？

rgba和opacity

New web developers and designers often get rgba (and its hsla equivalent) confused with opacity, using them interchangeably until they come up against a visual result that makes no sense.

新的Web开发人员和设计师经常使rgba (及其等同于hsla )与opacity混淆，可以互换使用它们，直到遇到没有意义的视觉结果。

This is understandable, as both opacity and the a component in rgba refer to the same quality: the level of transparency. However, their application and effect is very different:

这是可以理解的，因为opacity和rgba的a组件均指相同的质量 ：透明度。 但是，它们的应用和效果有很大不同：

• one (opacity) is a property; the other is the component of the value of a color property, such as background-color, box-shadow-color, or border-color.

  一个( opacity )是一种属性； 另一个是color属性值的组成部分，例如background-color ， box-shadow-color或border-color 。

• Most importantly, opacity affects the entire element it is applied to, whereas rgba affects only one aspect.

  最重要的是， opacity会影响应用到它的整个元素，而rgba仅影响一个方面。

opacity, can be thought of as a “fade out” effect for elements. As an example, let’s overlap two div elements with absolute positioning. Both divs will have white text. The first will have a dark blue background. The <div> on top will have a black background, and contain an image. First, the HTML:

opacity ，可以视为元素的“淡出”效果。 例如，让我们将两个div元素与绝对位置重叠。 两个div都会有白色文字。 第一个将具有深蓝色背景。 顶部的<div>将具有黑色背景，并包含图像。 首先，HTML：

<div id="lower">
	<p>There is nothing wrong with your television set. 
	Do not attempt to adjust the picture. 
	We are controlling the transmission.
	We will control the horizontal, we will control the vertical.
</div>
<div id="upper">
	<p><img src=the-twilight-zone.png alt="The Twilight Zone">
	We can change the focus to a soft blur or sharpen it to crystal clarity. 
For the next hour, sit quietly and we will control all that you see and hear.
</div>

Then the CSS:

然后是CSS：

body { 
	background: #444;
}
div {
	width: 20em;
	padding: 3em;
	position: absolute;
	border: 5px double #000;
	color: white;
}
div p {
	margin: 0;
	text-align: justify;
}
div#lower {
	background-color: rgb(0, 0, 127);
}
div img {
	width: 200px; 
	height: 150px;
	float: right;
	margin-left: 3em;
	margin-bottom: 3em;
}
div#upper {
	left: 18em;
	top: 8em;
	background-color: rgba(0, 0, 0, 1);
}

We’ll lower the alpha value for the

upper div halfway to 0. Note that the text, border and image remain unaffected by this change; the only difference, as we would expect, is to the background colour of the upper div.

upper DIV半路0 。 请注意，文本，边框和图像不受此更改的影响； 正如我们所期望的，唯一的区别是上div的背景色。

Taking the alpha component all the way to 0 for background-color would mean that it would be immaterial what values we put in for red, green, or blue; the background-color would, under this condition, always be fully transparent.

对于background-color将alpha分量一路设为0意味着我们为红色，绿色或蓝色输入的值无关紧要； 在这种情况下， background-color将始终是完全透明的。

div#upper {
	left: 17em; top: 7em;
	background-color: rgba(255, 255, 0, 0.5);
}

Let’s set

background-color back to the conditions we had at the start and introduce opacity. Set to a value of 1 under our initial conditions, there will be no difference. Set to 0.25, however, produces a significant change. As you can see to the left, the entire div, including the background colour, paragraph content, border and image, is now halfway transparent. This is, obviously, a very different effect.

background-color设置回开始时的条件，并引入opacity 。 设定值1我们的初始条件下，不会有任何区别。 设置为0.25会产生很大的变化。 如您所见，左侧的整个div (包括背景色，段落内容，边框和图像)现在是半透明的。 显然，这是非常不同的效果。

div#upper {
	left: 19em; top: 9em;
	background-color: rgba(0, 0, 0, 1);
	opacity: 0.25;
}

翻译自: https://thenewcode.com/239/Whats-The-Difference-Between-opacity-and-rgba

rgba和opacity