需要帮助为什么背景图像不显示在 div 上？
[英]Needed help why background image doesn't show up on the div?
问题描述
HELP I dont know really what to do, I did review everything on the W3 schools website about CSS and HTML but nothing works.
帮助我真的不知道该怎么做，我确实查看了 W3 学校网站上关于 CSS 和 HTML 的所有内容，但没有任何效果。 File paths are correct but the background of that div class = "mainBanner" is not functioning.文件路径正确，但该 div class = "mainBanner" 的背景不起作用。
<html> <head> <style> * { background-color: black; margin: 0; padding: 0; }.mainBanner { background-image: url(/images/background.jpg); color: #ffffff; text-align: center; height: 700px; } </style> </head> <div class="container mainBanner"> <h1>Welcome to The Travellers Website</h1> <h4>You're all in one solution for perfect travels. Make memories and take step across islands you've never seen before.</h4> </div> </html> <?--Is the background image covered by the * selector when the bg color is applied. This imgae from the .mainBanner class doesnt load even the file is correct-->2 个解决方案
解决方案1
1 已采纳 2020-07-05 11:00:00
Presuming the image is in the correct location, you are likely receiving issues as you haven't set a height/width of the image itself.假设图像位于正确的位置，您可能会收到问题，因为您没有设置图像本身的高度/宽度。 You can do this by using background-size您可以通过使用background-size来做到这一点
* { background-color: black; margin: 0; padding: 0; }.mainBanner { background-image: url(https://i.imgur.com/7a4DOBA.jpg); background-size:100% 100%; color: #ffffff; text-align: center; height: 700px; } <html> <div class="container mainBanner"> <h1>Welcome to The Travellers Website</h1> <h4>You're all in one solution for perfect travels. Make memories and take step across islands you've never seen before.</h4> </div> </html> <?--Is the background image covered by the * selector when the bg color is applied. This imgae from the .mainBanner class doesnt load even the file is correct-->
Is the background image covered by the * selector when the bg color is applied?
As .mainBanner is more specific than * , css specified under the .mainBanner will take precedence.由于.mainBanner比*更具体，因此在 .mainBanner 下指定的.mainBanner将优先。
解决方案2
0 2020-07-05 10:54:16
background: url(/images/background.jpg) center no-repeat ;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.