AtoZ CSS快速提示：不透明的控件元素可见性

爱被打了一巴掌 2022-12-03 09:54 147阅读 0赞

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][here 1].

本文是我们的AtoZ CSS系列的一部分。 您可以在[此处][here]找到该系列的其他条目。 您可以在[此处][here 1]查看完整的成绩单和`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`的新提示。

![o2b-01][]

## O是`opacity` **(**O is for `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][here 1].

我们可以使用`opacity`来控制页面上元素的可见性-从完全透明到完全不透明，如[原始截屏视频中所述][here 1] 。

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效果库的情况下创建淡入淡出效果时，这里有一些技巧。

### 提示1： `opacity`适用于整个元素 **(**Tip 1: `opacity` applies to the whole element**)** ###

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 */
    }

### 提示2： `opacity`会影响堆叠环境 **(**Tip 2: `opacity` affects stacking context**)** ###

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`创建新的堆叠上下文。

### 提示3：在没有jQuery的情况下创建淡入淡出效果 **(**Tip 3: Create fade effects without jQuery**)** ###

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/][https_www.sitepoint.com_atoz-css-quick-tip-opacity]

[here]: https://www.sitepoint.com/tag/atoz-css/
[here 1]: https://www.sitepoint.com/atoz-css-screencast-opacity
[o2b-01]: /images/20221123/5fb714e4141d456b8b2c2cf369962765.png
[https_www.sitepoint.com_atoz-css-quick-tip-opacity]: https://www.sitepoint.com/atoz-css-quick-tip-opacity/