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

Question

我有以下带有背景的元素：

例如，我想将它的不透明度设置为从 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;

Answer 1

这是你想要做的吗？小提琴

<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;
}

Answer 2

您可以使用 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用另一个定义替换以获得相同的效果。看到这个小提琴。

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