ReactJS 網頁無法正確顯示

Question

我剛剛完成了一個網頁的工作，並決定使用 Yarn 在 GitHub Pages 上進行部署。 問題是當它在本地主機上運行時一切看起來都很好，但是在我的瀏覽器中部署的版本上有些東西沒有正確顯示。

我在瀏覽器上測試過：

1. 谷歌瀏覽器 86.0.4240.193
2. Safari 13.1

在兩個相同的問題出現。 下面是一些在 localhost 和在線運行時的對比截圖：

本地主機：

在線的：

在第二個上，我的按鈕幾乎看不到輪廓。 我在想我的一些 CSS 可能導致了這個，所以這里也是我對這些按鈕的樣式：

.button {
    width: 29vw;
    height: 40vh;
    margin-left: 1.5vw;
    margin-right: 1.5vw;
    border: 3px solid black;
    border-radius: 10px;
    outline: none;
    padding: none;
    cursor: pointer;   
    opacity: 70%;
    font-family: myFont;
    font-size: 6vh;
    color: black;
}

.button:hover {
    opacity: 100%;
    animation: swing 1s;
}

知道為什么會這樣嗎？ 感謝您的任何幫助。

Answer 1

在玩我的 CSS 一段時間后，我發現了問題所在並能夠修復它。 事實上，我最初的想法是正確的，不透明度是導致這個問題的原因。

如果其他人有同樣的問題，這里是一個快速解決方案。 只需更改：

opacity: 70%;

到：

opacity: 0.7;