为什么在我的React应用中，div的背景图片没有显示在子元素的后面？

huangapple
go评论100阅读模式
英文:

Why isn't the div's background image showing up behind child elements in my React app?

问题

你想给一个 div 应用背景图像，但是该 div 的子元素不显示背景图像。图像只显示在空白区域。我正在使用 ReactJS。

以下是正在显示的内容：

为什么在我的React应用中，div的背景图片没有显示在子元素的后面？

以下是 div 的代码：

  1.  
  2. <div className='start'>
  3. 	<Navbar/>
  4. 	<div className='firstContainer'>
  5. 		<h3 className="subheading-div1">
  6.             通过Charzit体验无限的充电可能性
  7.           </h3>
  8. 		<h1 className="home-heading">
  9. 			<span>电动汽车充电</span>
  10. 			<span className="greenText">解决方案</span>
  11. 			<span>您喜欢的地方</span>
  12. 		</h1>
  13. 		<p className="desc-div1">
  14.             我们的电动汽车充电解决方案具有适应性和高效性，
  15.             让企业满足对清洁能源交通不断增长的需求，
  16.             同时降低其二氧化碳排放。
  17.           </p>
  18. 		<h2 className="desc-div1">立即下载</h2>
  19. 		<a href="/" target="_blank">
  20. 			<div className="btn-div">
  21. 				<FaGooglePlay className="btn" />
  22. 			</div>
  23. 		</a>
  24. 		<a href="/" target="_blank">
  25. 			<div className="btn-div">
  26. 				<FaApple className="btn" />
  27. 			</div>
  28. 		</a>
  29. 	</div>
  30. </div>

CSS

  1. .start {
  2.     height: 100vh;
  3.     background-image: url("../../public/main2.jpg");
  4.     background-size: cover;
  5.     background-size: 100%;
  6.     background-repeat: no-repeat;
  7. }
  9. .firstContainer {
  10.     padding-left: 50px;
  11.     width: 50vw;
  12.     z-index: -1;
  13. }
  15. .subheading-div1 {
  16.     font-size: 1.7rem;
  17.     margin: 0px;
  18. }
  20. .home-heading {
  21.     font-size: 3rem;
  22.     margin: 20px;
  23.     margin-bottom: 0px;
  24. }
  26. .greenText {
  27.     color: #79ca5d;
  28. }
  30. .desc-div1 {
  31.     font-size: 1.4rem;
  32.     font-weight: 700;
  33.     margin-top: 20px;
  34. }
  36. .btn-div {
  37.     background-color: transparent;
  38.     display: inline-block;
  39.     width: 68.46px;
  40.     height: 51.86px;
  41.     border-radius: 5px;
  42.     margin: 20px 20px 0 0;
  43.     border: 1px solid #79ca5d;
  44. }
  46. .btn-div:hover {
  47.     background-color: #79ca5d;
  48. }
  50. .btn {
  51.     color: #fff;
  52.     padding-right: 20px;
  53.     width: 45px;
  54.     height: 45px;
  55.     padding-left: 10px;
  56.     padding-top: 5px;
  57. }
英文:

I want to apply a background image to a div, but the divs' child element does not show the background image behind it. The image is only shown in the blank space. I'm using ReactJS.

Here is what's showing up:

为什么在我的React应用中，div的背景图片没有显示在子元素的后面？

Here is the code for the div

  1.  
  2. &lt;div className=&#39;start&#39;&gt;
  3. 	&lt;Navbar/&gt;
  4. 	&lt;div className=&#39;firstContainer&#39;&gt;
  5. 		&lt;h3 className=&quot;subheading-div1&quot;&gt;
  6.             Experience limitless charging possibilities with Charzit
  7.           &lt;/h3&gt;
  8. 		&lt;h1 className=&quot;home-heading&quot;&gt;
  9. 			&lt;span&gt;EV Charging&lt;/span&gt;
  10. 			&lt;span className=&quot;greenText&quot;&gt; Solutions &lt;/span&gt;
  11. 			&lt;span&gt;Where you like it &lt;/span&gt;
  12. 		&lt;/h1&gt;
  13. 		&lt;p className=&quot;desc-div1&quot;&gt;
  14.             Our electric vehicle charging solutions are adaptable and efficient
  15.             , allowing businesses to fulfill the rising demand for clean energy
  16.             transportation while lowering their CO2 footprint.
  17.           &lt;/p&gt;
  18. 		&lt;h2 className=&quot;desc-div1&quot;&gt;Download Now&lt;/h2&gt;
  19. 		&lt;a href=&quot;/&quot; target=&quot;_blank&quot;&gt;
  20. 			&lt;div className=&quot;btn-div&quot;&gt;
  21. 				&lt;FaGooglePlay className=&quot;btn&quot; /&gt;
  22. 			&lt;/div&gt;
  23. 		&lt;/a&gt;
  24. 		&lt;a href=&quot;/&quot; target=&quot;_blank&quot;&gt;
  25. 			&lt;div className=&quot;btn-div&quot;&gt;
  26. 				&lt;FaApple className=&quot;btn&quot; /&gt;
  27. 			&lt;/div&gt;
  28. 		&lt;/a&gt;
  29. 	&lt;/div&gt;
  30. &lt;/div&gt;

CSS

  1. .start {
  2.     height: 100vh;
  3.     background-image: url(&quot;../../public/main2.jpg&quot;);
  4.     background-size: cover;
  5.     background-size: 100%;
  6.     background-repeat: no-repeat;
  7. }
  9. .firstContainer {
  10.     padding-left: 50px;
  11.     width: 50vw;
  12.     z-index: -1;
  13. }
  15. .subheading-div1 {
  16.     font-size: 1.7rem;
  17.     margin: 0px;
  18. }
  20. .home-heading {
  21.     font-size: 3rem;
  22.     margin: 20px;
  23.     margin-bottom: 0px;
  24. }
  26. .greenText {
  27.     color: #79ca5d;
  28. }
  30. .desc-div1 {
  31.     font-size: 1.4rem;
  32.     font-weight: 700;
  33.     margin-top: 20px;
  34. }
  36. .btn-div {
  37.     background-color: transparent;
  38.     display: inline-block;
  39.     width: 68.46px;
  40.     height: 51.86px;
  41.     border-radius: 5px;
  42.     margin: 20px 20px 0 0;
  43.     border: 1px solid #79ca5d;
  44. }
  46. .btn-div:hover {
  47.     background-color: #79ca5d;
  48. }
  50. .btn {
  51.     color: #fff;
  52.     padding-right: 20px;
  53.     width: 45px;
  54.     height: 45px;
  55.     padding-left: 10px;
  56.     padding-top: 5px;
  57. }

答案1

得分: 0

似乎您提出的问题无法重现。我已将它放在下面的片段中，它似乎以您想要的方式呈现。

我猜您需要将.firstContainer元素的背景设置为透明。您可能在某个地方设置了它的颜色。

如果您需要更多帮助，我建议您使用重现您问题的片段更新您的问题。如果StackOverflow片段无法工作，因为您需要JSX支持使其工作，您可以使用类似CodeSandbox的工具。

  1. .start {
  2.     height: 100vh;
  3.     background-image: url("https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/blogs/18725/images/PuRv7TFRzGdNsmp3iRmj_Tetons.jpg");
  4.     background-size: cover;
  5.     background-size: 100%;
  6.     background-repeat: no-repeat;
  7. }
  9. .firstContainer {
  10.     padding-left: 50px;
  11.     width: 50vw;
  12.     z-index: -1;
  13. }
  15. .subheading-div1 {
  16.     font-size: 1.7rem;
  17.     margin: 0px;
  18. }
  20. .home-heading {
  21.     font-size: 3rem;
  22.     margin: 20px;
  23.     margin-bottom: 0px;
  24. }
  26. .greenText {
  27.     color: #79ca5d;
  28. }
  30. .desc-div1 {
  31.     font-size: 1.4rem;
  32.     font-weight: 700;
  33.     margin-top: 20px;
  34. }
  36. .btn-div {
  37.     background-color: transparent;
  38.     display: inline-block;
  39.     width: 68.46px;
  40.     height: 51.86px;
  41.     border-radius: 5px;
  42.     margin: 20px 20px 0 0;
  43.     border: 1px solid #79ca5d;
  44. }
  46. .btn-div:hover {
  47.     background-color: #79ca5d;
  48. }
  50. .btn {
  51.     color: #fff;
  52.     padding-right: 20px;
  53.     width: 45px;
  54.     height: 45px;
  55.     padding-left: 10px;
  56.     padding-top: 5px;
  57. }
  1. <div class='start'>
  2.     <div class='firstContainer'>
  3.         <h3 class="subheading-div1">
  4.             使用Charzit体验无限充电可能性
  5.         </h3>
  6.         <h1 class="home-heading">
  7.             <span>电动汽车充电</span>
  8.             <span class="greenText">解决方案</span>
  9.             <span>您喜欢的地方</span>
  10.         </h1>
  11.         <p class="desc-div1">
  12.             我们的电动车充电解决方案是可适应和高效的，允许企业满足对清洁能源交通不断增长的需求，同时降低其二氧化碳排放。
  13.         </p>
  14.         <h2 class="desc-div1">立即下载</h2>
  15.         <a href="/" target="_blank">
  16.             <div class="btn-div">
  17.                 <FaGooglePlay class="btn" />
  18.             </div>
  19.         </a>
  20.         <a href="/" target="_blank">
  21.             <div class="btn-div">
  22.                 <FaApple class="btn" />
  23.             </div>
  24.         </a>
  25.     </div>
  26. </div>
英文:

It seems your issue is not reproducible as you have presented it. I've placed it in a snippet below, and it appears to be rendering the way you want.

I would guess that you need to set the background of your .firstContainer element to be transparent. You might have a style somewhere giving it a color.

If you need more help, I recommend updating your question with a snippet that reproduces your issue. If the StackOverflow snippet doesn't work because you require JSX support to make it work, you can use something like CodeSandbox.

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

  1. .start {
  2.     height: 100vh;
  3.     background-image: url(&quot;https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/blogs/18725/images/PuRv7TFRzGdNsmp3iRmj_Tetons.jpg&quot;);
  4.     background-size: cover;
  5.     background-size: 100%;
  6.     background-repeat: no-repeat;
  7. }
  9. .firstContainer {
  10.     padding-left: 50px;
  11.     width: 50vw;
  12.     z-index: -1;
  13. }
  15. .subheading-div1 {
  16.     font-size: 1.7rem;
  17.     margin: 0px;
  18. }
  20. .home-heading {
  21.     font-size: 3rem;
  22.     margin: 20px;
  23.     margin-bottom: 0px;
  24. }
  26. .greenText {
  27.     color: #79ca5d;
  28. }
  30. .desc-div1 {
  31.     font-size: 1.4rem;
  32.     font-weight: 700;
  33.     margin-top: 20px;
  34. }
  36. .btn-div {
  37.     background-color: transparent;
  38.     display: inline-block;
  39.     width: 68.46px;
  40.     height: 51.86px;
  41.     border-radius: 5px;
  42.     margin: 20px 20px 0 0;
  43.     border: 1px solid #79ca5d;
  44. }
  46. .btn-div:hover {
  47.     background-color: #79ca5d;
  48. }
  50. .btn {
  51.     color: #fff;
  52.     padding-right: 20px;
  53.     width: 45px;
  54.     height: 45px;
  55.     padding-left: 10px;
  56.     padding-top: 5px;
  57. }

<!-- language: lang-html -->

  1. &lt;div class=&#39;start&#39;&gt;
  2.     &lt;div class=&#39;firstContainer&#39;&gt;
  3.         &lt;h3 class=&quot;subheading-div1&quot;&gt;
  4.             Experience limitless charging possibilities with Charzit
  5.           &lt;/h3&gt;
  6.         &lt;h1 class=&quot;home-heading&quot;&gt;
  7.             &lt;span&gt;EV Charging&lt;/span&gt;
  8.             &lt;span class=&quot;greenText&quot;&gt; Solutions &lt;/span&gt;
  9.             &lt;span&gt;Where you like it &lt;/span&gt;
  10.         &lt;/h1&gt;
  11.         &lt;p class=&quot;desc-div1&quot;&gt;
  12.             Our electric vehicle charging solutions are adaptable and efficient
  13.             , allowing businesses to fulfill the rising demand for clean energy
  14.             transportation while lowering their CO2 footprint.
  15.           &lt;/p&gt;
  16.         &lt;h2 class=&quot;desc-div1&quot;&gt;Download Now&lt;/h2&gt;
  17.         &lt;a href=&quot;/&quot; target=&quot;_blank&quot;&gt;
  18.             &lt;div class=&quot;btn-div&quot;&gt;
  19.                 &lt;FaGooglePlay class=&quot;btn&quot; /&gt;
  20.             &lt;/div&gt;
  21.         &lt;/a&gt;
  22.         &lt;a href=&quot;/&quot; target=&quot;_blank&quot;&gt;
  23.             &lt;div class=&quot;btn-div&quot;&gt;
  24.                 &lt;FaApple class=&quot;btn&quot; /&gt;
  25.             &lt;/div&gt;
  26.         &lt;/a&gt;
  27.     &lt;/div&gt;
  28. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月1日 03:36:46
  • 转载请务必保留本文链接：https://go.coder-hub.com/76376757.html
  • css
  • html
  • javascript
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定