This article is a part of our AtoZ CSS Series. You can find other entries to the series here. You can view the full transcript and screencast for opacity here.
本文是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。 您可以在此处查看完整的成绩单和opacity截屏视频。
Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, so in this article, we’ve added a new quick tip about opacity for you.
欢迎来到我们的AtoZ CSS系列！ 在本系列中，我将探索不同CSS值(和属性)，每个均以不同的字母开头。 我们知道有时候屏幕广播还不够，因此在本文中，我们为您添加了一个有关opacity的新提示。
We can use opacity to control the visibility of elements on the page – anything from completely transparent to completely opaque as discussed in the original screencast video.
我们可以使用opacity来控制页面上元素的可见性-从完全透明到完全不透明，如原始截屏视频中所述 。
Here are a couple of tips when using opacity to ensure the right parts of the element are semi-transparent and to demonstrate how we can create fading effects without relying on JavaScript effects libraries.
使用opacity以确保元素的正确部分为半透明并演示如何在不依赖JavaScript效果库的情况下创建淡入淡出效果时，这里有一些技巧。
When setting opacity on an element, the whole element, including its children are made semi-transparent. The opacity is not inherited by the children so unfortunately you can’t set opacity: 1 on them to make them fully opaque again.
在元素上设置opacity时，整个元素(包括其子元素)将变为半透明。 子对象不会继承 opacity ，因此很遗憾，您无法设置opacity: 1设置为使其再次完全不透明。
If you want to have the background of an element semi-transparent but want the child elements (eg: text or images) to be opaque, use a semi-transparent background instead of using opacity.
如果要使元素的background半透明，但希望子元素(例如，文本或图像)不透明，请使用半透明background而不要使用opacity 。
.module { background: rgba(255,255,255,0.5); /* semi-trans white */ }When setting opactiy to a value less than 1 the element is placed on a new layer so the background can be shown beneath the semi-transparent element. This is similar to how z-index works and, just like z-index, using opacity creates a new stacking context.
当将opactyy设置为小于1的值时，该元素将放置在新层上，因此background可以显示在半透明元素下面。 这类似于z-index工作方式，就像z-index ，使用opacity创建新的堆叠上下文。
I’ll preface this with a disclaimer: I like jQuery and use it a lot – on almost every project I work on. What I’m talking about here is not abandoning jQuery (although you don’t really need it in this case) but using native CSS functionality instead of leaning on JS for effects.
我将以免责声明作为开头：我喜欢jQuery，并在我从事的几乎每个项目中经常使用它。 我在这里谈论的不是放弃jQuery(尽管在这种情况下您实际上并不需要它)，而是使用本机CSS功能而不是依靠JS来实现效果。
We can create fade in and fade out effects quite simply by combining opacity, transition and possibly some JS class switching.
通过将opacity ， transition和可能的JS类切换结合起来，我们可以非常简单地创建淡入和淡出效果。
To outline the scenario, imagine a situation where clicking a button fades in a modal window to display some additional content. This modal content could be hidden when the page loads and then displayed using jQuery’s fadeIn() method.
要概述这种情况，请设想一种情况，其中单击一个按钮会在模式窗口中消失以显示一些其他内容。 可以在页面加载时隐藏此模式内容，然后使用jQuery的fadeIn()方法显示该模式内容。
$('.show-modal-button').on('click',function(e) { e.preventDefault(); $('.modal').fadeIn(); });This will use JavaScript to animate the element from display:none to display:block by injecting inline styles.
通过注入内联样式，这将使用JavaScript对display:none到display:block的元素进行动画处理。
I tend to avoid having inline styles injected unnecessarily and we can actually perform the same effect by setting up “state” classes in our CSS – one for the visible state and one for the invisible state – apply a transition to the element we want to fade and then toggle the different states using simple class switching. You could use a CSS pseudo-state like :hover or :focus if you wanted to keep the effect purely CSS.
我倾向于避免不必要地插入内联样式，我们实际上可以通过在CSS中设置“状态”类来实现相同的效果-一个用于可见状态，一个用于不可见状态-对我们要淡入淡出的元素应用过渡然后使用简单的类切换来切换不同的状态。 如果要保持纯CSS效果，可以使用CSS伪状态，如:hover或:focus 。
First we set up the states in the CSS. I use a naming convention prefix of is- to demonstrate that the class is a state triggered by JS.
首先，我们在CSS中设置状态。 我使用is-的命名约定前缀来演示该类是由JS触发的状态。
.modal { /* other styles for modal */ transition: opacity 1s ease; } .modal.is-visible { opacity: 1; } .modal.is-hidden { opacity: 0; }We can now toggle the states by dynamically adding or removing classes in JS (assuming that you start with the class is-hidden in the HTML):
现在，我们可以通过动态添加或删除JS中的类来切换状态(假设您从HTML中is-hidden的类开始)：
$('.show-modal-button').on('click',function(e) { // turn off the is-hidden class and turn on the is-visible class $('.modal').toggleClass('is-hidden is-visible'); });So there you have it, 3 quick tips about the opacity property.
这样就可以了，关于opacity属性的3个快速技巧。
The one I’d encourage you to use the most is leveraging CSS for your effects over using JavaScript. I find I have much more control of the animations and transitions, and you can pull off some pretty fancy effects without huge lines of jQuery animation callbacks.
我最鼓励您使用的一种方法是使用CSS来获得效果，而不是使用JavaScript。 我发现我对动画和过渡有更多的控制权，并且无需巨大的jQuery动画回调行就可以实现一些漂亮的效果。
翻译自: https://www.sitepoint.com/atoz-css-quick-tip-opacity/
