将透明背景图像居中放置在标题中的径向渐变顶部

Question

刚刚为我正在建设的网站设计了一个新的徽标，并制作了一个透明的背景PNG图像，我希望在它后面有一个放射状的图像，并使图像保持在半径起始的中心。

它在桌面上看起来很好，直到你最小化屏幕，然后出现严重的溢出。我在HTML和正文部分尝试了overflow-x:hidden，这消除了侧面的灰色空间，但图像从径向渐变偏移，看起来很俗气。这个问题也存在于手机中，显示溢出，如果我选择隐藏它，那么它就非常偏离中心。

我尝试了CSS中不同的background值的多种组合，-图像，-位置，-大小，-封面都无济于事。

目前我有：

html lang-html prettyprint-override"><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>

有没有一种方法可以将它们相互覆盖，我试过用径向渐变和url（“banner.png”）列出背景色、背景色、或背景图像，但这没有用，事实上，如果我试图从CSS中包含它，图像就不会出现。

很难办，我想最简单的事情就是创建渐变作为背景，但我不希望徽标在调整大小时变形。我放弃了用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>