徑向漸變背景不能正常轉換

在懸停時，我無法獲得懸停時從0不透明度轉換爲0.6的背景。這裏是我的CSS：徑向漸變背景不能正常轉換

.work--overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: radial-gradient(rgba(64,56,43,0), rgba(0,0,0,0), rgba(0,0,0,0)); 
    opacity: 1; 
    z-index: 1; 
    transition: background 0.3s ease-in-out; 
} 

    .work--overlay:hover { 
     background: radial-gradient(rgba(64,56,43,0.6), rgba(0,0,0,0.6), rgba(0,0,0,0.6)); 
     transition: background 0.3s ease-in-out; 
    }

我還要提到的是，效果確實懸停工作，只是過渡方便部分不能正常工作。所以我99％肯定這是一個CSS的東西。

來源

2017-07-02 J.Doe

[使用CSS3過渡的可能的複製與漸變背景]（https://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds） –

@ObsidianAge：//很好拍攝 –

做了一些改變你的代碼，主要用於不透明從懸停狀態刪除過渡：

... 

    opacity: 0; 
    z-index: 1; 
    transition: all 0.3s ease-in-out; 
} 

    .work--overlay:hover { 
     opacity:1; 
     background: radial-gradient(rgba(64,56,43,0.6), rgba(0,0,0,0.6), rgba(0,0,0,0.6)); 
    }

這裏是撥弄工作過渡：https://jsfiddle.net/g6a0b2zg/

來源

2017-07-02 23:16:13

這不適合我，因爲有子元素這是hav他們的陰影在其他徘徊中發生了變化。 –

在這種情況下，有沒有可能爲非懸停狀態指定背景顏色？更新示例https://jsfiddle.net/g6a0b2zg/1/ –

我有點用你的答案來解決它。我結束了懸停改變不透明度爲1，但漸變背景的不透明度設置爲0.6。所以當背景達到100％不透明度時，實際上是60％。謝謝：） –

我之前遇到過這個問題。我在僞類之前添加了一個::以將不透明度轉換爲背景。基本上你創建了一個位於實際類下面的類（參見位置和z-index的更改）。然後當它徘徊它使圖層可見。

.work--overlay { 
    position: relative; 
    z-index: 50; 

    width: 100%; 
    height: 100%; 
    background: radial-gradient(rgba(64,56,43,0), rgba(0,0,0,0), rgba(0,0,0,0)); 

    transition: opacity 0.3s ease-in-out; 
} 

.work--overlay:before { 
      background: radial-gradient(rgba(64,56,43,0.6), rgba(0,0,0,0.6), rgba(0,0,0,0.6)); 
    top:0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: -100; 
    position: absolute; 
    content: ''; 
    opacity: 0; 
    transition: opacity 3s ease-in-out; 
} 


    .work--overlay:hover:before { 
     opacity:1; 
    }

來源

2017-07-02 22:00:39 edswartz

徑向漸變背景不能正常轉換

回答

相關問題