操作背景圖像徑向轉換在chrome中不起作用？

我已經創建了純粹的CSS的漣漪效應，以前在所有瀏覽器中都很好地工作，現在看起來它目前不在Chrome瀏覽器中工作，但在其他瀏覽器中正確（不包括IE瀏覽器，我不測試該垃圾）好奇爲什麼會發生這種情況？我已經耗盡了我的資源，因爲它現在正在發生什麼事情。操作背景圖像徑向轉換在chrome中不起作用？

<a href="javascript:void(0)" class="btn-shadow btn-ripple">Button</a> 

[class^="btn"], 
[class*=" btn"] 
    display inline-flex 
    font-family 'Roboto', sans-serif 
    text-decoration none 
    justify-content center 
    align-items center 
    text-align center 
    cursor pointer 
    white-space nowrap 
    padding 8px 20px 
    font-size 14px 
    background-color white 
    border-radius 2px 
    color #434A54 
    text-transform uppercase 
    border none 
    box-shadow 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) 
    transition all 0.4s ease-in-out 
    background-position 50% 
    outline none !important // we don't like outlines, nasty hobbits... 
    &:before { 
     content: ''; 
     position: absolute; 
     background: red; 
    } 
    &:not([disabled]) 
     &.btn-shadow 
      &:active 
       box-shadow 0 5px 10px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.23) 
     &.btn-ripple 
      transition all 0.4s ease-in-out 
      background-size 200% 
      &:active 
       background-repeat no-repeat 
       background-size 1000% 
       background-image radial-gradient(circle, rgba(0, 0, 0, .1) 10%, rgba(0, 0, 0, 0) 11%)

看到它發生在這裏： http://codepen.io/brycesnyder/pen/gPojeO?editors=1100

謝謝！

來源

2016-06-10 Bryce Snyder

'（不含即，我不測試垃圾）'LOL！我整天都在笑。也許我們對鉻垃圾也是如此，那就是新的IE。我希望！！ –

這不是有效的CSS。那是/ sass/...嗎？ – j08691

@ j08691它在Codepen中被宣佈爲手寫筆 – HerrSerker

你的問題很有意思。

看着Firefox和Chrome我能夠重現你所描述的內容。

，閱讀背景大小property docs in W3schools

你忘了定義X和之後來找我，最簡單的解y新背景大小的尺寸值

試試這個：

&.btn-ripple 
    transition all 0.4s ease-in-out 
    background-size 200% 200% 
&:active 
    background-repeat no-repeat 
    background-size 1000% 1000%

添加這些值來Codepen你連接我能看到正確的轉換在Chrome 51

希望這有助於

來源

2016-06-14 11:15:09 wick3d

Yup，'background-size'不會從* x *繼承* y *值（如果未定義），則應顯示兩個值。 –

太棒了，謝謝一大堆！我不明白爲什麼它以前有效，它在一些瀏覽器中可用，而不是突然停止。我得到了一個圈子裏跑的點。 –

操作背景圖像徑向轉換在chrome中不起作用？

回答

相關問題