background-image 相关问题

牙科样本页面示例 HTML：牙科页面 ... 示例 HTML： <header id="banner"> <h1>Dentistry Page</h1> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="Services/services.html">Services</a></li> <li><a href="About/about.html">About</a></li> <li><a href="Contact/contact.html">Contact</a></li> </ul> </nav> </header> CSS 示例： header { background-image: url(Images/Homepage-Feature-Image-Mobile.jpg); height: 250px; background-repeat: no-repeat; background-position: center; margin: 1em; padding: 1em; grid-area: header; } nav ul { margin: 0px; padding: 0px; list-style-type: none; display: flex; justify-content: center; align-items: flex-end; } nav ul li a { display: block; border: 1px solid; border-radius: .5em; padding: .25em; margin: .5em; } 到目前为止，我在尝试了几种不同的组合后得到了上面的代码。我试图将导航菜单置于背景图像下方，但仍在标题元素内。我尝试了几种不同的风格，但发现这最接近我正在寻找的风格。代码可能很混乱，因为这是我的第一个项目，我刚刚学习，但我似乎无法在任何地方找到答案。我希望将菜单放在背景图片下方。如果容器内有一个元素（例如 div 或 header），并且您将背景应用于该容器，则只要该元素位于该容器中，就无法将该元素移动到背景下方。如果您想将导航栏保留在标题内，则必须在标题内创建一个专门应用背景的 div，然后该 div 之后的任何内容都将显示在下方。 <header id="banner"> <div id='background'> <h1>Dentistry Page</h1> </div> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="Services/services.html">Services</a></li> <li><a href="About/about.html">About</a></li> <li><a href="Contact/contact.html">Contact</a></li> </ul> </nav> </header> #background { background-image: url(Images/Homepage-Feature-Image-Mobile.jpg); height: 250px; background-repeat: no-repeat; background-position: center; margin: 1em; padding: 1em; grid-area: header; } nav ul { margin: 0px; padding: 0px; list-style-type: none; display: flex; justify-content: center; align-items: flex-end; } nav ul li a { display: block; border: 1px solid; border-radius: .5em; padding: .25em; margin: .5em; }

html css flexbox background-image display

回答 1 投票 0

如何将图像放在搜索栏的背景中？

这是我在这里的第一篇文章。我是一名自学成才的开发人员，我真的很想学习如何将图像放在搜索栏的背景中。我可以想象 HTML 不适合，但我不懂 CSS...

html css image background-image searchbar

回答 1 投票 0

将图像放在 WP、WooCommerce“商店”页面的标题后面

我可能错过了一些简单的东西，但是...... 我有一个使用 WordPress 创建的网站，上面有一个 WooCommerce 商店。我想在横幅中的“商店”文本后面放置一个图像...

wordpress image woocommerce background-image

回答 1 投票 0

知道全屏背景图像的良好 CSS 技术吗？

我在网上浏览并尝试了各种方法来解决这个问题，但还没有找到一种适合我的技术。我希望我的网站背景图片居中，填满整个