Question

不要使用类nav-item在div中使用background-image。所有图像都在同一目录中。标题的背景工作。而img src一切都很好。问题在哪里？

我尝试了一切。

header {
    background: url('backSmall2.png');
    height: 670px;
}
 
img {
    width: 14%;
    transform:skewY(-1deg);
    margin-top: 40px;
    margin-left: 40px;
    box-shadow:  0 0 10px rgba(0,0,0,0.5);
    transform: rotate(-3deg);
}
 
.nav-item {
    width: 12%;
    background-image: url('frame.png');
    margin-top: 80px;
    margin-left: 140px;
}
 
.logo-contacts {
    background-image: url('frame.png');
}
 
.contacts {
    width: 100%;
    height: 300px;
    background-color: aqua;
}

<!DOCTYPE html>
<html>
    <head>
    <link href="normalize.css" rel='stylesheet'>
    <link href="index-style.css" rel='stylesheet'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
    <script src="jquery-2.2.1.js"></script>
    </head>
    <body>
        <header>
            <img src="logo1.png">
            <div class="nav-item"></div>
            <a href="#contacts" class="logo-contacts"> </a>
        </header>
        <a name="contacts">
            <div class="contacts">
            </div>
        </a>
    </body>
</html>

Answer 1

问题是你的div是空的 - 所以 - 它没有高度。尝试将高度添加到CSS类：

.nav-item {
    width: 12%;
    background-image: url('frame.png');
    margin-top: 80px;
    margin-left: 140px;
    height: XXXpx;
}

Answer 2

您应该向background-image提供有关职位的更多信息。

例如：

.nav-item {
    width: 12%;
    background-image: url('frame.png');
    background-position: center; /* Added */
    background-size: cover; /* Added */
    background-repeat: no-repeat; /* Added */
    margin-top: 80px;
    margin-left: 140px;
}

详细了解Mozilla Developer Network的background财产。

Answer 3

var collection = new ol.Collection();
var featureOverlay = new ol.layer.Vector({
  map: map,
  source: new ol.source.Vector({
    features: collection,
    useSpatialIndex: false // optional, might improve performance
  }),
  style: overlayStyle,
  updateWhileAnimating: true, // optional, for instant visual feedback
  updateWhileInteracting: true // optional, for instant visual feedback
});
featureOverlay.getSource().addFeature(feature);
featureOverlay.getSource().removeFeature(feature);

   <!-- language: lang-css -->

    header {
       background: url('backSmall2.png');
       height: 670px;
   }

  img {
       width: 14%;
      transform:skewY(-1deg);
       margin-top: 40px;
       margin-left: 40px;
       box-shadow:  0 0 10px rgba(0,0,0,0.5);
       transform: rotate(-3deg);
    }

   .nav-item {
       width: 600px;
      height:600px;
    background-image: url('frame.png');
    margin-top: 80px;
    margin-left: 140px;
}

.logo-contacts {
    background-image: url('frame.png');
}

.contacts {
    width: 100%;
    height: 300px;
    background-color: aqua;
}

background-image在div元素中不起作用

3 个答案: