將 CSS3 轉場與漸層背景結合使用
P粉217629009
2023-08-23 21:25:42
<p>我試圖在滑鼠懸停時使用 css 在縮圖上轉換，以便在懸停時背景漸變淡入。轉換不起作用，但如果我只是將其更改為 <code>rgba()<!--代碼-->值，它工作正常。不支援漸層嗎？我也嘗試過使用圖像，它也不會轉換圖像。 </code></p><code>
<p>我知道這是可能的，因為在另一篇文章中有人做到了，但我不知道到底是怎麼做到的。任何幫助> 這是一些可以使用的 CSS：</p>
<pre class="brush:css;toolbar:false;">#container div a {
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;
position: absolute;
width: 200px;
height: 150px;
border: 1px #000 solid;
margin: 30px;
z-index: 2
}
#container div a:hover {
background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4)))
}
</pre>
<p><br /></p></code>
一種解決方法是轉換背景位置以產生漸變變化的效果： http://sapphion.com/2011/10/css3-漸變轉場與背景位置/
#DemoGradient{ background: -webkit-linear-gradient(#C7D3DC,#5B798E); background: -moz-linear-gradient(#C7D3DC,#5B798E); background: -o-linear-gradient(#C7D3DC,#5B798E); background: linear-gradient(#C7D3DC,#5B798E); -webkit-transition: background 1s ease-out; -moz-transition: background 1s ease-out; -o-transition: background 1s ease-out; transition: background 1s ease-out; background-size:1px 200px; border-radius: 10px; border: 1px solid #839DB0; cursor:pointer; width: 150px; height: 100px; } #DemoGradient:Hover{ background-position:100px; }漸變尚不支持過渡（儘管當前規範表示它們應該支持透過插值實現類似漸變到類似漸變的過渡。）。
如果您想要具有背景漸層的淡入效果，則必須在容器元素上設定不透明度，並且「過渡」不透明度。
（已經有一些瀏覽器版本支援漸變過渡（例如 IE10。我於 2016 年在 IE 中測試了漸變過渡，當時它們似乎可以工作，但我的測試程式碼不再工作。）
更新：2018 年 10 月 具有無前綴新語法的漸變過渡[例如Radial-gradient(...)] 現在確認可以（再次？）在 Microsoft Edge 17.17134 上運行。我不知道這個是什麼時候添加的。仍然無法在最新的 Firefox 和 Chrome / Windows 10 上運作。
更新：2021 年 12 月 現在，在最近的基於 Chromium 的瀏覽器中可以使用 @property 解決方法（但在 Firefox 中不起作用）。請參閱（並投票）下面（或上方 YMMV）@mahozad 的答案。