如何將背景顏色更改為透明？

Question

我在 prestashop 中有這個網站

我想將 header 的背景更改為透明。

slider 應該出現在 header 的背景中，就像在這個網站https://demotheme.site/prestashop/at_nova_demo/en/home-7.html中一樣。 我正在嘗試在檢查模式下執行此操作，但我無法執行此操作。

Answer 1

您需要更改兩個 css 屬性以使 header 透明：

當頁面沒有向下滾動時：

#header.navbar-fixed-top {
   background: transparent;
}

當你滾動頁面時，還需要改變這個：

#header.navbar-fixed-top.mini-navbar {
   background: rgba(255,255,255,0); /* <----here set the opacity to 0 */
  -moz-box-shadow: 0 5px 10px rgba(0,0,0,.1);
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.1);
  -o-box-shadow: 0 5px 10px rgba(0,0,0,.1);
  -ms-box-shadow: 0 5px 10px rgba(0,0,0,.1);
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
}

在這里檢查

要使 slider 出現在 header 的背景中，您需要從iviewSlider元素中刪除margin-top ：

.page-index .iviewSlider {
    margin-top: 0; /* here set margin-top to 0, if not working, try to set as margin-top: 0 !important */
}

那么您的網站將如下所示

Answer 2

使用此代碼

header#header {
    background-color: transparent!important;
    box-shadow: none!important;
}

Answer 3

檢查工具

按照這個

- 右鍵單擊並檢查元素 - 使用像瀏覽器一樣的 crome，然后單擊圖像中指示的圖標 - 在 header 上，當焦點出現時單擊它 - 在瀏覽器控制台的元素部分將指示元素和類/id - 查找css 文件中的類/id 和：

背景：透明；