如何将背景图像添加到.nav [英] How can I add background image to .nav

问题描述

尝试将十字的背景图像添加到菜单后面的.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）
} 

解决方案

< blockquote>反对我更好的判断我去了网站，发现了两个关键错误：



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  < span class =code-keyword> =  / ministries / > 部委<   / a  >  <   / li  >  
 <   li     class   =  menu-item-278 >  
 <   a     href   =  / sermons / > 讲道的<  < span class =code-leadattribute> / a  >  <   / li  >  
 <  < span class =code-leadattribute> / ul  >  
 <   / li  >  
 <   li     class   =  menu-item-21 >  
 <   a     class   =  sf-with-ul < span class =code-attribute>   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  < span class =code-keyword>>  <   / li  >  
 <   li     class   =  menu-item-114 >  
 <  < span class =code-leadattribute> 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  >  
 <  < span class =code-leadattribute> li     class   =  menu-item-110 >  
 < span class =code-keyword><   a     href   =  / curriculum / > 课程<   / a  >  <   / li   >  
 <   / ul  >  
 <   / li  < span class =code-keyword>>  
 <   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 selectors

nav {background-image:...}
#site-primary-nav{background-image:...}
#site-primary-menu{background-image:...}

2- The URL for the background image does not resolve.

这篇关于如何将背景图像添加到.nav的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！