在標題中放置一個徑向漸變頂部的透明背景圖像

Question

剛剛爲網站設計了一個新的標誌，我正在構建並製作一個透明背景PNG圖像，我希望它背後有一個放射狀圖像並且圖像保持中心半徑的起源。

它在桌面上看起來很好，直到最小化屏幕，然後出現嚴重溢出。我在HTML和Body部分嘗試了overflow-x: hidden，它消除了兩側的灰色空間，但是圖像從放射狀漸變的外觀上移開，看起來很俗氣。這個問題也存在於移動設備中，顯示溢出，如果我選擇隱藏它，那麼它是非常偏離中心。

我嘗試過多種不同組合的background值，CSS，-image, -position, -size, -cover無濟於事。

目前我有：

<style> 
 
html,body { 
 
\t \t \t width: 100%; 
 
\t \t \t height: 100%; 
 
\t \t \t margin: 0px; 
 
\t \t \t padding: 0px; 
 
\t \t } 
 
    #banner { 
 
\t \t \t background-image: black; /* For browsers that do not support gradients */ 
 
\t \t \t background-image: -webkit-radial-gradient(red, gray, black); /* Safari 5.1 to 6.0 */ 
 
\t \t \t background-image: -o-radial-gradient(red, gray, black); /* For Opera 11.6 to 12.0 */ 
 
\t \t \t background-image: -moz-radial-gradient(red, gray, black); /* For Firefox 3.6 to 15 */ 
 
\t \t \t background-image: radial-gradient(red, gray, black); /* Standard syntax */ 
 
\t \t \t width: 100%; 
 
\t \t \t background-position: center; 
 
\t \t \t background-repeat: no-repeat; 
 
\t \t \t background-size: cover; 
 
    } 
 
</style> 
 

 
<header id="banner"> 
 
\t <img src="banner.png" style="position:center"/> 
 
</header>

有沒有覆蓋他們在彼此的方式，我都試過上市background-color，background，或background-image使用徑向漸變以及與url("banner.png")但這並沒有奏效，實際上，如果我嘗試從CSS中包含圖像，圖像將不會出現。

漂亮難倒，我認爲最簡單的事情就是創建漸變作爲背景，但我不希望徽標在調整大小時發生扭曲。我放棄了嘗試在SVG中做到這一點，並認爲這會更容易。

Answer 1

<style> 
 
html,body { 
 
\t \t \t width: 100%; 
 
\t \t \t height: 100%; 
 
\t \t \t margin: 0px; 
 
\t \t \t padding: 0px; 
 
\t \t } 
 
    #banner { 
 
\t \t \t background-image: black; /* For browsers that do not support gradients */ 
 
\t \t \t background-image: -webkit-radial-gradient(red, gray, black); /* Safari 5.1 to 6.0 */ 
 
\t \t \t background-image: -o-radial-gradient(red, gray, black); /* For Opera 11.6 to 12.0 */ 
 
\t \t \t background-image: -moz-radial-gradient(red, gray, black); /* For Firefox 3.6 to 15 */ 
 
\t \t \t background-image: radial-gradient(red, gray, black); /* Standard syntax */ 
 
\t \t \t width: 100%; 
 
\t \t \t background-position: center; 
 
\t \t \t background-repeat: no-repeat; 
 
\t \t \t background-size: cover; 
 
\t \t \t text-align: center; 
 
    } 
 
</style> 
 

 
<header id="banner"> 
 
\t <img src="banner.png"/> 
 
</header>