Question

有点新的HTML，想要编辑我的导航栏，使其后面有一个图像，导航栏位于图像的底部。我该怎么做？

在查看了一些论坛帖子之后，这就是我的尝试：

＆＃13;

:: problems summary ::
:::: WARNINGS
        [NOT FOUND  ] com.google.guava#guava;16.0.1!guava.jar(bundle) (1ms)
==== local-m2-cache: tried

  file:/root/.m2/repository/com/google/guava/guava/16.0.1/guava-16.0.1.jar

    [NOT FOUND  ] com.google.code.findbugs#jsr305;3.0.0!jsr305.jar (1ms)

==== local-m2-cache: tried

  file:/root/.m2/repository/com/google/code/findbugs/jsr305/3.0.0/jsr305-3.0.0.jar

    ::::::::::::::::::::::::::::::::::::::::::::::

    ::              FAILED DOWNLOADS            ::

    :: ^ see resolution messages for details  ^ ::

    ::::::::::::::::::::::::::::::::::::::::::::::

    :: com.google.guava#guava;16.0.1!guava.jar(bundle)

    :: com.google.code.findbugs#jsr305;3.0.0!jsr305.jar

    ::::::::::::::::::::::::::::::::::::::::::::::



:: USE VERBOSE OR DEBUG MESSAGE LEVEL FOR MORE DETAILS
Exception in thread "main" java.lang.RuntimeException: [download failed: com.google.guava#guava;16.0.1!guava.jar(bundle), download failed: com.google.code.findbugs#jsr305;3.0.0!jsr305.jar]
    at org.apache.spark.deploy.SparkSubmitUtils$.resolveMavenCoordinates(SparkSubmit.scala:1068)
    at org.apache.spark.deploy.SparkSubmit$.prepareSubmitEnvironment(SparkSubmit.scala:287)
    at org.apache.spark.deploy.SparkSubmit$.submit(SparkSubmit.scala:154)
    at org.apache.spark.deploy.SparkSubmit$.main(SparkSubmit.scala:121)
    at org.apache.spark.deploy.SparkSubmit.main(SparkSubmit.scala)

＆＃13;

#cover {
background-image: url("Images\FB Cover.png");
}

＆＃13;

Answer 1

将图像作为可以使用的DOM元素的背景，background-image css属性。例如 background-image：url（＆＃39; https://static.pexels.com/photos/87646/horsehead-nebula-dark-nebula-constellation-orion-87646.jpeg＆＃39;）;

W3School有关于css属性的精彩文档。 here is the link

Answer 2

#cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(http://lorempixel.com/800/600) no-repeat 50% 50% / cover;
}
menu {
  position: absolute;
  left: 20px;
  bottom: 20px;
}
a {
  color: #fff;
}

<div id="cover">
  <menu>
    <li><a href="Index.html">Home</a></li>
    <li><a href="About.html">About DRC</a></li>
    <li><a href="Products.html">Our Products</a></li>
    <li><a href="Contact.html">Contact</a></li>
  </menu>
<div>

简单的例子

如何在导航栏后面获取图像

2 个答案: