Question

我已经尝试了很多方法，但一直遇到我有小图片的问题，我想覆盖页面而不复制。图像是由HTML和CSS组成的简单交叉淡入淡出幻灯片。如果有人知道解决方案请帮助。代码在这里https://www.codecademy.com/byteSurfer77914/codebits/Lg1o3G/edit

Answer 1

＆＃13;

body {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
   font-weight: 300;
 }
 .css-slideshow {
   min-width: 1024px;
   min-height: 100%;
   width: 100%;
   height: auto;
 }
 .css-slideshow figure {
   margin: 0;
   width: 100%;
   min-height: 100%;
   background: #;
   position: fixed;
 }
 .css-slideshow img {
   box-shadow: 0 0 2px #666;
   width: 100%;
   height: 100%;
 }
 .css-slideshow figcaption {
   position: absolute;
   top: 0;
   color: #fff;
   background: rgba(0, 0, 0, .3);
   font-size: .8em;
   padding: 8px 12px;
   opacity: 0;
   transition: opacity .5s;
 }
 .css-slideshow:hover figure figcaption {
   transition: opacity .5s;
   opacity: 1;
 }
 .css-slideshow-attr {
   max-width: 495px;
   text-align: right;
   font-size: .7em;
   font-style: italic;
   margin: 0 auto;
 }
 .css-slideshow-attr a {
   color: #666;
 }
 .css-slideshow figure {
   opacity: 0;
 }
 figure:nth-child(1) {
   animation: xfade 48s 42s infinite;
 }
 figure:nth-child(2) {
   animation: xfade 48s 36s infinite;
 }
 figure:nth-child(3) {
   animation: xfade 48s 30s infinite;
 }
 figure:nth-child(4) {
   animation: xfade 48s 24s infinite;
 }
 figure:nth-child(5) {
   animation: xfade 48s 18s infinite;
 }
 figure:nth-child(6) {
   animation: xfade 48s 12s infinite;
 }
 figure:nth-child(7) {
   animation: xfade 48s 6s infinite;
 }
 figure:nth-child(8) {
   animation: xfade 48s 0s infinite;
 }
 @keyframes xfade {
   0% {
     opacity: 1;
   }
   10.5% {
     opacity: 1;
   }
   12.5% {
     opacity: 0;
   }
   98% {
     opacity: 0;
   }
   100% {
     opacity: 1;
   }
 }

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel='stylesheet' href='style.css' />
  <script src='script.js'></script>
</head>

<body>
  <div class="css-slideshow">
    <figure>
      <img scr="https://scontent-atl1-1.xx.fbcdn.net/hphotos-xft1/v/t1.0-9/11696006_552542634884522_6974810122332336734_n.jpg?oh=dc9f855a26758a984d62764398a993b5&oe=561D8818" alt="class-header-css3" class="alignnone size-full wp-image-172" />
      <figcaption></figcaption>

    </figure>
    <figure>
      <img src="https://scontent-atl1-1.xx.fbcdn.net/hphotos-xtp1/v/t1.0-9/11698916_549988971806555_4844839813799871571_n.jpg?oh=494882d5e67135ad9ca19325272049dd&oe=56197441" alt="class-header-semantics" class="alignnone size-full wp-image-179" />
      <figcaption></figcaption>
    </figure>
    <figure>
      <img src="https://scontent-atl1-1.xx.fbcdn.net/hphotos-xtp1/v/t1.0-9/11707540_553121584826627_9134683716038424767_n.jpg?oh=d262e8103383780cf894371fbd3660c5&oe=56191F45" alt="class-header-offline" class="alignnone size-large wp-image-178" />
      <figcaption></figcaption>
    </figure>
    <figure>
      <img src="https://scontent-atl1-1.xx.fbcdn.net/hphotos-xat1/v/t1.0-9/11692694_552316594907126_8150294442120674585_n.jpg?oh=d1b1c34e04e3d76623a1c71a3740e98f&oe=5612DBBC" alt="hike1" class="hike10" />
      <figcaption></figcaption>
    </figure>
    <figure>
      <img src="https://scontent-atl1-1.xx.fbcdn.net/hphotos-xtp1/v/t1.0-9/11011897_554257658046353_2992577499490719642_n.jpg?oh=16bf71549ec783130c57c53aac6a0cd6&oe=5622A3BA" alt="hike" class="alignnone size-large wp-image-176" />
      <figcaption></figcaption>
    </figure>
    <figure>
      <img src="https://scontent-atl1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/10846061_548303745308411_6417320283077954578_n.jpg?oh=39836d991c85c44e5a07b12425df4781&oe=562742BA" alt="class-header-multimedia" class="alignnone size-large wp-image-175" />
      <figcaption></figcaption>
    </figure>
    <figure>
      <img src="https://scontent-atl1-1.xx.fbcdn.net/hphotos-xfp1/v/t1.0-9/10644879_450777305061056_6728861527484189803_n.jpg?oh=c706542ae39e77541fa279f424cf2303&oe=561CA391" alt="class-header-3d" class="alignnone size-large wp-image-174" />
      <figcaption></figcaption>
    </figure>
    <figure>
      <img src="https://scontent-atl1-1.xx.fbcdn.net/hphotos-xtp1/v/t1.0-9/10398022_450320015106785_2038216740372010379_n.jpg?oh=7ddda1c9e3f524da0f93100b4cddb4b2&oe=565121A3" alt="class-header-performance" class="alignnone size-large wp-image-173" />
      <figcaption></figcaption>
    </figure>
  </div>

</body </html>

＆＃13;

试试此代码

.css-slideshow img{
  box-shadow: 0 0 2px #666;
  min-width: 100%;
  min-height: 100%;
}

虽然你不应该这样做，因为它会拉伸较小的图像。

如何制作HTML / CSS幻灯片当图片尺寸不同时，将屏幕填充为背景？

1 个答案: