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

Question

刚刚为我要建立的网站设计了一个新徽标，并制作了透明的背景PNG图像，我想要在其后方放置一个放射状的图像，并希望该图像保持半径起源的中心。

在桌面上看起来还不错，直到最小化屏幕，然后才出现严重的溢出。 我试过了overflow-x: hidden在HTML和Body部分中，它消除了侧面的灰色空间，但是图像从径向渐变偏离并看起来发粘。 移动设备中也存在此问题，显示为溢出，如果我选择隐藏它，则它会偏离中心。

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

目前我有：

 <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中添加图片，该图片将不会显示。

很困惑，我想最简单的方法是创建渐变作为背景，但是我不希望徽标在调整大小时变形。 我放弃了尝试在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>