如何将背景图像添加到.nav

本文介绍了如何将背景图像添加到.nav的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 尝试将十字的背景图像添加到菜单后面的.nav栏中。 该网站是aelorics.com。 我尝试过： 我尝试了几个snipets od css将它们添加到简单的css或header.css文件中。 .x-navbar { background-image：url（'IMAGE URL'）; background-size：cover; } .navbar { background-image：url（https： //ringgeorge.com/wp-content/uploads/2017/07/Handphone-7.jpg）} 解决方案 反对我更好的判断我去了网站，发现了两个关键错误： 1-你没有一个带有navbar类的元素或x-navbar < nav id = site-primary-nav > < ul id = site-primary-menu class = large-nav sf-menu mobile-menu clearfix sf-js -enabled sf-arrows style = touch-action：pan-y; > < li 类 = MenuJibberJabber > < a class = sf-with- ul href = / church / > Church < / a > < ul class = 子菜单 style = display：none; > < li class = menu-item-277 > < ; a href = / ministries / > 部委< / a > < / li > < li class = menu-item-278 > < a href = / sermons / > 讲道的< / a > < / li > < / ul > < / li > < li class = menu-item-21 > < a class = sf-with-ul href = / academy / > 学院< / a > < ul class = 子菜单 style = display：none; > < li class = page-item-89 menu-item -113 > < a href = / > 概述< / a > < / li > < li class = menu-item-115 > < a href = / who-we-are / > 我们是谁< / a > < / li > < li class = menu-item-114 > < a href = / llc-vision / > LLCA Vision < / a > < / li > < li class = menu-item-112 > < a href = / llca-mission / > LLCA使命< / a > < / li > < li class = menu-item-111 > < a href = / applicationfees-and-dress-code / > 申请，费用和着装要求< / a > < / li > < li class = menu-item-110 > < a href = / curriculum / > 课程< / a > < / li > < / ul > < / li > < li class = menu-item-47 > < a class = sf-with-ul href = / community-kids-learning-center / > 社区儿童学习中心< / a > < ul class = 子菜单 style = display：none; > < li class = menu-item-172 > < a href = / cklc-page / > CKLC关于 < / a > < / li > < li class = menu-item-171 > < a href = / cklc-hours-and-fees / > CKLC小时数< / a > < / li > < / ul > < / li > < li class = menu-item-38 > < a href = / contact-us / > 联系我们< / a > < / li > < / ul > < / nav > 我会尝试使用其中一个选择器来应用CSS nav { background-image ： ...} ＃site-primary-nav {background-image ： ...} ＃site-primary-menu {background-image ： ...} 2-背景图片的网址无法解析。 Trying to add a background image of a cross to my .nav bar behind the menu. the site is aelorics.com.What I have tried:I have tried several snipets od css adding them to simple css or the header.css file..x-navbar {background-image: url('IMAGE URL');background-size: cover;}.navbar { background-image: url("https://ringgeorge.com/wp-content/uploads/2017/07/Handphone-7.jpg")} 解决方案 Against my better judgement I went to the site and found two critical errors that are issues:1- You do not have an element with a class of "navbar" or "x-navbar"<nav id="site-primary-nav"> <ul id="site-primary-menu" class="large-nav sf-menu mobile-menu clearfix sf-js-enabled sf-arrows" style="touch-action: pan-y;"> <li class="MenuJibberJabber"> <a class="sf-with-ul" href="/church/">Church</a><ul class="sub-menu" style="display: none;"> <li class="menu-item-277"> <a href="/ministries/">Ministries</a></li> <li class="menu-item-278"> <a href="/sermons/">Sermon’s</a></li> </ul> </li> <li class="menu-item-21"> <a class="sf-with-ul" href="/academy/">Academy</a><ul class="sub-menu" style="display: none;"> <li class="page-item-89 menu-item-113"> <a href="/">Overview</a></li> <li class="menu-item-115"> <a href="/who-we-are/">Who We Are</a></li> <li class="menu-item-114"> <a href="/llc-vision/">LLCA Vision</a></li> <li class="menu-item-112"> <a href="/llca-mission/">LLCA Mission</a></li> <li class="menu-item-111"> <a href="/applicationfees-and-dress-code/"> Application,Fees and Dress Code</a></li> <li class="menu-item-110"> <a href="/curriculum/">Curriculum</a></li> </ul> </li> <li class="menu-item-47"> <a class="sf-with-ul" href="/community-kids-learning-center/"> Community Kids Learning Center</a><ul class="sub-menu" style="display: none;"> <li class="menu-item-172"> <a href="/cklc-page/">CKLC About</a></li> <li class="menu-item-171"> <a href="/cklc-hours-and-fees/">CKLC Hours</a></li> </ul> </li> <li class="menu-item-38"> <a href="/contact-us/">Contact Us</a></li> </ul></nav>I would try applying that CSS using one of these selectorsnav {background-image:...}#site-primary-nav{background-image:...}#site-primary-menu{background-image:...}2- The URL for the background image does not resolve. 这篇关于如何将背景图像添加到.nav的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！