建立一个快速的网站。理想情况下，我希望它看起来类似于: http://imgur.com/a/NVVEv
其中，夏威夷背景图像在开始时淡入(并保持淡入淡出，不透明度为 0.2)，中间的矩形随着标题和按钮淡入，但在背景图像之后完全显示。
它们将是两个单独的图像(背景 #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; }
}
}
最佳答案
试试这个。我添加了示例图像。第一张图片设置为 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>关于html - 在背景图像上褪色图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43065091/