Question

尝试将图片显示在网页上但是除非我删除<li style= background-image>，否则替换为<img src="image.jpg">我会获得与导航关联的点，但只有白页。我正在关注codepen的教程，这让我走得很远。任何帮助将不胜感激。

default.html中

<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">    </script>
<script src="jquery.flexslider.js"></script>

<div class="flexslider-container">
<div class="flexslider">
    <ul class="slides">
      <li style="background-image: url(http://placehold.it/1600x900/F3D92E/FFFFFF);"></li>
      <li style="background-image: url(http://placehold.it/1600x900/D0021B/FFFFFF);"></li>
      <li style="background-image: url(http://placehold.it/1600x900/4A4A4A/FFFFFF);"></li> 
    </ul>
</div>
</div>
<script>
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    controlNav: true,
   directionNav: true
  });
</script>
});

Default.CSS

.flexslider .slides > li {
  background-position: center;
  height: 100%;
  width: 100%;
  display: none;
  -webkit-backface-visibility: hidden;
  -webkit-background-size: cover;
  -moz-background-size: cover;
 -o-background-size: cover;
  background-size: cover;
   }

.flexslider-container,
.flexslider .slides,
.flex-viewport {
  height: 100%;
   }

html,
background-image {
 height: 100%;
  min-height: 100%;
  }

body {
  position: relative;
 margin: 0;
padding: 0;
  }

ul.slides {
 margin: 0;
   padding: 0;
  }

  .flexslider {
   margin: 0;
 padding: 0;
 width: 100%;
 height: 100%;
 border: 0px;
 #overflow: hidden;
}

FlexSlider图像显示

0 个答案: