更改“HTML”標記背景顏色時如何阻止其他類更改顏色-有解無憂

您好，我正在嘗試使用名為Survey.module.css的檔案中的以下代碼更改頁面的背景：

html  {
    background-image: linear-gradient( 94.3deg,  rgba(26,33,64,1) 10.9%, rgba(81,84,115,1) 87.1% );
  }

我已經使用以下匯入陳述句將 CSS 匯入到我的 React組件中：import style from './Survey.js'

Survey.js 中的代碼如下

  import React from 'react'
import { Container, Col, Row } from 'react-bootstrap'
import style from './Survey.module.css'

function Survey() {
  return (
  <html>
  <div>
    <h1 className="display-5 text-center mt-5 text-white">Tell us about yourself</h1>
    <div className={`${style.container} d-flex justify-content-center align-items-center`}>
      <div className='row justify-content-md-center'>
        <div className='col col-lg-5 shadow p-3 mb-5 bg-white rounded'>
          <img src='https://static.toiimg.com/photo/msid-77430626/77430626.jpg?228049' className='rounded img-fluid'></img>
        </div>
        <div className='col col-lg-5 shadow p-3 mb-5 bg-white rounded'>
          <h1></h1>
        </div>
      </div>
    </div>
  </div>
  </html>
  )
}

export default Survey

我的問題是，當我使用上述代碼更改 CSS 中的背景時，我專案中其他頁面的背景也會發生變化。所有這些頁面都使用 ***.module.css 匯入它們的 CSS 檔案我嘗試使用 CSS 模塊來避免這個問題，但我仍然遇到它。有什么建議嗎？

uj5u.com熱心網友回復：

給你的 html 類，這樣你的 css 就不會影響其他頁面。

html.survey  {
    background-image: linear-gradient( 94.3deg,  rgba(26,33,64,1) 10.9%, rgba(81,84,115,1) 87.1% );
}

import React from 'react'
import { Container, Col, Row } from 'react-bootstrap'
import style from './Survey.module.css'

function Survey() {
  return (
  <html className="survey">
  <div>
    <h1 className="display-5 text-center mt-5 text-white">Tell us about yourself</h1>
    <div className={`${style.container} d-flex justify-content-center align-items-center`}>
      <div className='row justify-content-md-center'>
        <div className='col col-lg-5 shadow p-3 mb-5 bg-white rounded'>
          <img src='https://static.toiimg.com/photo/msid-77430626/77430626.jpg?228049' className='rounded img-fluid'></img>
        </div>
        <div className='col col-lg-5 shadow p-3 mb-5 bg-white rounded'>
          <h1></h1>
        </div>
      </div>
    </div>
  </div>
  </html>
  )
}

export default Survey

uj5u.com熱心網友回復：

如何創建一個div你喜歡的className包裝其余內容的，你可以添加你css喜歡的樣式background-image。我沒有background-image在整個html檔案上設定 a 背后的邏輯。

<div className={styles.surveyContainer}>
    <div className={styles.content}>
        ...rest of the content
    </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/366389.html

標籤：html css 反应背景图片

上一篇：AngularNgFor路徑問題

下一篇：無法找到錯誤表單渲染后沒有回應