在背景圖像上淡出圖像

構建一個快速網站。理想情況下，我希望它看起來與此類似： http://imgur.com/a/NVVEv 在背景圖像上淡出圖像

其中，夏威夷背景圖像在開始褪（和保持與0.2的不透明度褪色）&中間的矩形消失在標題和按鈕，但完全顯示在背景圖像之後。

他們會是兩個單獨的圖像（背景＃1和矩形＃2） - 我怎麼會最好這樣做與HTML/CSS？我有背景圖像工作，但矩形不會淡入和顯示。我想要的按鈕也鏈接到頁面（不知道如何做到這一點）

還難以找到調整我的網頁，以適應瀏覽器的最佳方式嗎？我知道這是ALT標籤，但我不記得所需的確切代碼。

我是noob，無法找到足夠的代碼來完成我的請求。

乾杯

下面的代碼：

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; } 
} 

}

來源

2017-03-28 ConfusedDreamweaverUser

你有什麼嘗試？至少顯示您已編寫的代碼，如果您有任何問題，我們可以提供幫助 –

請發佈您的代碼。 –

@DierigPatrick更新。道歉。 – ConfusedDreamweaverUser

試試這個。我添加了示例圖像。第一個圖像設置爲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>

來源

2017-03-28 09:22:35

感謝這個。我實際上喜歡背景倒置和中心圖像正確顯示 - 因爲這將主持按鈕在中心？這將如何解決？而且是您提供的所有CSS的代碼？ – ConfusedDreamweaverUser

要反轉圖像將此添加到背景圖片 -webkit-filter：invert（100％）; filter：invert（100％）; –

抱歉，我的意思是，我希望背景圖像褪色，然後保持不透明度爲0.2，和中心圖像淡入，但不透明度爲100％（可見）只需進行雙重檢查，上面的哪些代碼部分是CSS？您能否清楚哪些是HTML和CSS？乾杯 – ConfusedDreamweaverUser

在背景圖像上淡出圖像

回答

相關問題