不透明度 - 使用 CSS 从背景更改为背景

Posted 2023-03-06

【中文标题】不透明度 - 使用 CSS 从背景更改为背景

【英文标题】：Opacity - changing from-to for background with CSS

【发布时间】：2013-08-02 22:01:41

【问题描述】：

我有以下带背景的元素：

例如，我想将其不透明度设置为从 0 变为 1。是否可以仅使用 CSS 来实现？

这就是我制作背景的方式：

padding: 5px 10px 5px 10px;
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-size: 20px 20px;
background-color: #E5D52B;

【参考方案1】：

您可以使用 CSS3 过渡。

.button 
    padding: 5px 10px 5px 10px;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    background-size: 20px 20px;
    background-color: #E5D52B;
    opacity:1;
    transition:opacity 1s;
    -webkit-transition:opacity 1s;

.button:hover 
    opacity:0;
    transition:opacity 1s;
    -webkit-transition:opacity 1s;

您可以将.button:hover 替换为另一个定义以获得相同的效果。 See this fiddle.

【讨论】：

嗯，问题是我不需要这个作为任何事件都会触发的动画。我需要这个永久或不透明度从左到右从 0 变为 1。

【参考方案2】：

这是你想要做的吗？ fiddle

<button class="button">
   <span></span>
</button>

.button 
    padding: 5px 10px 5px 10px;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    background-size: 20px 20px;
    background-color: #E5D52B;
    width:400px;
    height:100px;

span 
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 1) 80%);
    left:0;
    top:8px;
    width:400px;
    height:100px;
    position:absolute;
    margin:0;
    padding: 0;

【参考方案3】：

这是你的做法:::

img
   
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
   
 img:hover
   
   opacity:1.0;
   filter:alpha(opacity=100); /* For IE8 and earlier */