Question

刚刚为我正在建设的网站设计了一个新徽标，并制作了一个透明的背景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中，图像将不会出现。

非常难倒，我认为最简单的方法是创建渐变作为背景，但我不希望徽标在调整大小时变形。我放弃了尝试在SVG中做到这一点，并认为这将更容易。

将透明背景图像置于标题中的径向渐变之上

1 个答案: