html - 在标题中的径向渐变顶部居中透明背景图像

Question

我刚刚为我正在 build 的网站设计了一个新 Logo ，并制作了一个透明背景 PNG 图像，我想要在它后面有一个径向图像，并使图像保持在半径起源的中心。

它在桌面上看起来很好，直到您最小化屏幕然后出现严重溢出。我在 HTML 和 Body 部分尝试了 overflow-x: hidden，它消除了两侧的灰色空间，但图像偏离了径向渐变并且看起来很俗气。移动端也有这个问题，显示溢出，如果我选择隐藏就很偏心。

我尝试了 CSS 中不同 background 值的多种组合，-image, -position, -size, -cover 无济于事。

目前我有:

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

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

有没有办法将它们相互叠加，我已经尝试列出 background-color、background 或 background-image径向渐变以及 url("banner.png") 但这没有用，事实上，如果我尝试从 CSS 中包含它，图像将不会出现。

非常难过，我认为最简单的事情是创建渐变作为背景，但我不希望 Logo 在调整大小时变形。我放弃了尝试在 SVG 中这样做，并认为这会更容易。

Answer 1

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

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