Question

建立快速网站。理想情况下，我希望它看起来像这样： http://imgur.com/a/NVVEv

其中，夏威夷背景图像在开始时淡入（并且保持褪色，不透明度为0.2）＆amp;中间的矩形用标题和按钮淡入，但完全显示在背景图像之后。

它们是两个单独的图像（背景＃1和矩形＃2） - 我怎么能最好用HTML / CSS做到这一点？我有背景图像工作，但矩形不淡入和显示。我想让按钮也链接到页面（不确定如何做到这一点）

还难以找到调整页面大小以适应浏览器的最佳方法吗？我知道它是alt标签，但我不记得所需的确切代码。

我是一个菜鸟，无法找到足够的代码来满足我的要求。

干杯

以下代码：

HTML：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<link href="background.css" rel="stylesheet" type="text/css">
</head>

<body>
 <img src = "bkgd.jpg" alt=""/>

 <img src="backdrop.png" width="1920" height="1080" alt=""/> 

 </body>
 </html>

CSS：

 @charset "UTF-8";
 /* CSS Document */

 html, body {

     height: 100%;
     margin: 0;
     padding: 0;
     background-size: auto;

 }

  img {
     opacity: 0.5;
     background-repeat: no-repeat;
     background-position: center;
     margin-right: auto;
     margin-left: auto;
     background-attachment: fixed;


     /*Fade In Animation*/
     -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
          -moz-animation: fadein 2s; /* Firefox < 16 */
          -ms-animation: fadein 2s; /* Internet Explorer */
          -o-animation: fadein 2s; /* Opera < 12.1 */
             animation: fadein 2s;
 }

 @keyframes fadein {
     from { opacity: 0; }
     to   { opacity: 0.5; }
 }

 /* Firefox < 16 */
 @-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 0.5; }
 }

 /* Safari, Chrome and Opera > 12.1 */
 @-webkit-keyframes fadein {
     from { opacity: 0; }
     to   { opacity: 0.5; }
 }

 /* Internet Explorer */
 @-ms-keyframes fadein {
from { opacity: 0; }
to   { opacity: 0.5; }
 }

 /* Opera < 12.1 */
 @-o-keyframes fadein {
     from { opacity: 0; }
     to   { opacity: 0.5; }
 }

 }

Answer 1

试试这个。我添加了样本图像。第一张图片设置为body背景，淡化图片设置为div背景。

要将淡化图像放在页面中间，请使用

display: flex;
justify-content: center;
align-items: center;

要使背景图像适合屏幕宽度，请使用

width: 100vw;
height: 100vh;

/* Body Margin*/

body {
  margin: 0;
}


/* Background Div*/

.background {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
}


/* Background Div: after*/

.background:after {
  position: absolute;
  width: 100vw;
  height: 100vh;
  content: '';
  background-image: url("https://www.ncl.com/sites/default/files/DestinationGalleries.Hawaii.SnorkelingBay900x400.jpg");
  background-position: center center;
  background-repeat:  no-repeat;
  background-attachment: fixed;
  background-size:  cover;
  background-color: #999;
  -webkit-animation: fadein 10s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 10s;
  /* Firefox < 16 */
  -ms-animation: fadein 10s;
  /* Internet Explorer */
  -o-animation: fadein 10s;
  /* Opera < 12.1 */
  animation: fadein 10s;
  /*Fade In Animation*/
}


/* Fade in animations */

@keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}


/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}


/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}


/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}


/* Opera < 12.1 */

@-o-keyframes fadein {
  opacity: 0.2;
}

to {
  opacity: 1;
}


/* Foregraound div */

.foreground {
  margin-top: 20px;
  position: relative;
  width: 400px;
  height: 100px;
  background-color: #eaeaea;
  padding: 20px;
  border: 1px solid #555;
  border-radius: 10px;
  /*Fade In Animation*/
  -webkit-animation: fadein 10s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 10s;
  /* Firefox < 16 */
  -ms-animation: fadein 10s;
  /* Internet Explorer */
  -o-animation: fadein 10s;
  /* Opera < 12.1 */
  animation: fadein 10s;
  z-index: 1;
}


/* Name Tag */

.name-tag {
  font-family: 'avenir-light';
  text-align: center;
  font-size: 24px;
  text-transform: uppercase;
}


/* Socail Media List*/

.social-media-list {
  list-style: none;
  display: flex;
  justify-content: space-around;
  padding: 0;
}


/* Socail Media Item*/

.social-media-link img {
  height: 50px;
  width: 50px;
  transition: all 0.5s ease;
}

.social-media-link img:hover {
  -ms-transform: scale(1.2);
  /* IE 9 */
  -webkit-transform: scale(1.2);
  /* Safari */
  transform: scale(1.2);
  /* Standard syntax */
}

<section class="background">
  <div class="foreground">
    <div class="name-tag">lorem ipsum
    </div>
    <ul class="social-media-list">
      <li class="social-media-link">
        <a href="https://twitter.com/"><img src="https://cdn3.iconfinder.com/data/icons/basicolor-reading-writing/24/077_twitter-128.png"></a>
      </li>
      <li class="social-media-link">
        <a href="https://www.youtube.com/"><img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/youtube_circle-128.png"></a>
      </li>
      <li class="social-media-link">
        <a href="https://in.linkedin.com/"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-512.png"></a>
      </li>
      <li class="social-media-link">
        <a href="https://www.instagram.com/"><img src="https://cdn2.iconfinder.com/data/icons/black-white-social-media/32/instagram_online_social_media-128.png"></a>
      </li>
    </ul>
  </div>
</section>

在背景图片上淡化图片

1 个答案: