在Safari中使用透明颜色会发生什么? [英] What happens in Safari with the transparent color?

问题描述

有一个块，文本越靠近末尾逐渐消失.这是通过 :: after 完成的，从透明色到背景色都赋予了 linear-gradient .最近注意到，在当前版本的浏览器中，除了野生动物园外，其他所有地方都很好(在第11版中，太糟糕了).自动前缀不是解决方案(他在这里，不需要).

There is a block in which text is closer to the end gradually disappears. This is done using the ::after, which is given linear-gradient from the transparent color to the background color. Recently noticed that in current versions of browsers, all is well, everywhere except safari (and in the 11th, too bad). Autoprefix not solution (he's here and not needed).

我的代码:

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  min-height: 100vh;
}

p {
  margin: auto;
  width: 40vw;
  height: 40vh;
  max-width: 300px;
  max-height: 300px;
  overflow: hidden;
  position: relative;
}

p::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  background-image: linear-gradient(transparent 0, white 100%);
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel urna efficitur, tempor felis eu, lacinia sem. Nulla lacinia tincidunt turpis, faucibus luctus leo. Mauris lobortis orci lacus, vel luctus leo venenatis ac. Phasellus feugiat urna sit
  amet nisi dapibus, a dignissim nibh dignissim. Suspendisse vel tempor nisl. Pellentesque hendrerit, nibh non vehicula finibus, turpis tellus auctor purus, ac placerat magna elit vel mauris. Nullam viverra venenatis enim. Vivamus odio lectus, maximus
  quis dolor et, lobortis ullamcorper velit. Nulla fringilla ligula a metus faucibus commodo non ac lectus. Aenean bibendum arcu eu nibh convallis ornare.</p>

决定将 transparent 替换为 rgba(255,255,255,0).但这是不正常的行为，我认为这是一个拐杖.

Decides to replace transparent with rgba(255,255,255,0). But this is abnormal behavior, and a crutch in my opinion.

有什么想法吗?

推荐答案

我不知道使用 RGBA(255，255，255，0)的任何缺点，如果这对您有用，我认为您应该使用它.那是更好的方法，因为它不像 transparent 关键字那样依赖浏览器确定不透明度为0的颜色.

I don't know of any drawbacks of using RGBA(255, 255, 255, 0) and if that's working for you, I think you should use it. That's the better method, because it doesn't rely on the browser to determine which is the color with 0 opacity like the transparent keyword does.

您遇到的问题是由于Safari的最新版本认为 transparent 所表示的颜色是 gray 而另一种是浏览器认为，在您的情况下，它是 white -与元素的背景色相同.

The problem, which you're experiencing, is due to the fact that the latest version of Safari thinks that the color meant by transparent is gray and the other big browsers think it's, in your case, white – the same as the background color of the element.

为防止意外行为(例如渐变)，当前的W3C规范指出应在

To prevent unexpected behavior, such as in gradients, the current W3C spec states that transparent should be calculated in the alpha-premultiplied color space. However, be aware that some older browsers may treat it as black with an alpha value of 0 and apparently the latest version of Safari does something similar.

要回答OP的评论:

没有无色透明性，带有渐变的示例完美显示了这一点.

There is no such thing as colorless transparency and the example with gradients shows this perfectly.

例如，Mozilla的MDN网络文档说:

For example, Mozilla's MDN Web Docs says:

transparent关键字表示完全透明的颜色.这使背景完全可见.从技术上讲，透明是一种rgba(0,0,0,0)的快捷方式.

The transparent keyword represents a fully transparent color. This makes the background completely visible. Technically, transparent is a shortcut for rgba(0,0,0,0).

该关键字代表一种颜色，尽管它是完全透明的，但仍然是一种颜色.

The keyword represents a color, although a fully transparent one, but still a color.

这篇关于在Safari中使用透明颜色会发生什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！