如何在背景顏色好友老板登錄/注冊頁面上顯示圖像

Question

我有一個 buddyboss 的兒童主題。 我有 style.css 文件。

這是關於注冊/登錄頁面

我要存檔的是下圖：

所以我有這段代碼：

/**
 * For register page
 */
@media (min-width: 992px) {
  body.buddypress.register.login-split-page .login-split .split-overlay {
    width: 100%;
    height: 100%;
    background-color: #270A4C !important;
    position: relative;
    z-index: 1;
    opacity: 1;

  }
}

/**
 * for login page
 */
@media (min-width: 992px) {
  body.login.login-split-page .login-split .split-overlay {
    width: 100%;
    height: 100%;
    background-color: #270A4C !important;
    position: relative;
    z-index: 1;
    opacity: 1;
  }
}

/**
 * background image
 */
.login-split {
  background-image: url(./wordpress/wp-content/uploads/2022/02/bg-mycells.png);
  background-size: covers;
  background-position: 50% 50%;
  background-color: #270A4C !important;

}

但是登錄頁面上的紫色甚至沒有顯示。

那么我必須改變什么？

開發工具中的 CSS class 如下所示：

@media (min-width: 992px)
body.login.login-split-page .login-split {
    width: 50%;
    position: fixed;
    left: 0;
    height: 100%;
    display: block;
}

這是它現在的樣子：

所以在開發工具中，我這樣做：

@media (min-width: 992px)
body.login.login-split-page .login-split {
    width: 50%;
    position: fixed;
    left: 0;
    height: 100%;
    display: block;
    background-color: red;
}

我看到了紅色。

但如果我在 style.css 中這樣做：

@media (min-width: 992px)
body.login.login-split-page .login-split {
    width: 50%;
    position: fixed;
    left: 0;
    height: 100%;
    display: block;
    background-color: red !important;
}

我重新加載頁面，紅色不可見。

我只是不明白。 頁面寄存器廣告為紫色。

但即使我 go 到： E:\Xampp\htdocs\wordpress\wp-content\themes\buddyboss-theme-child\assets\css

我修改了文件：custom.css：

/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/


body.login.login-split-page .login-split .split-overlay {
  width: 100%;
  height: 100%;
  background-color: #000;
  position: relative;
  z-index: 1;
  opacity: 1;
}

沒有改變。

Answer 1

你可以試試：

background: linear-gradient(to top, #3204fdba, #9907facc), url(./wordpress/wp-content/uploads/2022/02/bg-mycells.png);