今天我设计了一个透明的PNG背景,它只位于div的左上角,div的其余部分将保留PNG所有透明区域的渐变背景,以及div本身的其余部分 .
通过我认为可行的代码解释可能更好:
#mydiv .isawesome {
/* Basic color for old browsers, and a small image that sits in the top left corner of the div */
background: #B1B8BD url('../images/sidebar_angle.png') 0 0 no-repeat;
/* The gradient I would like to have applied to the whole div, behind the PNG mentioned above */
background: -moz-linear-gradient(top, #ADB2B6 0%, #ABAEB3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ADB2B6), color-stop(100%,#ABAEB3));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ADB2B6', endColorstr='#ABAEB3',GradientType=0 );
}
我发现的是大多数浏览器选择其中一个 - 大多数选择渐变,因为它进一步沿着CSS文件 .
我知道这里的一些人会说"just apply the gradient to the PNG you're making" - 但这并不理想,因为div会保持动态的高度 - 有时很短,有时很高 . 我知道这个渐变并不重要,但我认为可能值得问你们所想的一切 .
Is it possible to have a background image, while keeping the rest of the background as a gradient?
5 回答
请记住,CSS渐变实际上是image value,而不是某些人可能期望的颜色值 . 因此,它特别对应于
background-image
,而不是background-color
,或整个background
的简写 .基本上,您真正想要做的是分层两个背景图像:梯度上的位图图像 . 为此,您可以在同一声明中指定它们,并使用逗号分隔它们 . 首先指定图像,然后指定渐变 . 如果指定背景颜色,那么该颜色将始终绘制在最底部图像的下方,这意味着渐变将很好地覆盖它,即使在回退的情况下它也会起作用 .
因为您包含供应商前缀,所以您需要为每个前缀执行一次,一次用于无前缀,一次用于回退(不使用渐变) . 要避免重复其他值,请使用longhand属性1而不是
background
速记:不幸的是,这在IE中无法正常工作,因为它使用
filter
作为渐变,它总是将背景描绘成背景 .要解决IE的问题,您可以将
filter
和背景图像放在单独的元素中 . 这样可以避免CSS3多重背景的强大功能,因为你可以为所有浏览器进行分层,但是必须要做到这一点 . 如果您没有实现标准化的CSS渐变,那么您无需担心 .1从技术上讲,背景位置和背景重复声明适用于这两个层,因为通过重复值而不是钳位来填充间隙,但是因为背景位置是其初始值而背景重复对于渐变覆盖整个元素,没关系太多 . 可以在此处找到有关如何处理分层背景声明的详细信息 .
你可以使用Transparency and gradients . 渐变支持透明度 . 例如,您可以在堆叠多个背景时使用此功能,以在背景图像上创建淡化效果 .
图像和渐变的顺序在这里非常关键,我想说清楚 . 渐变/图像组合效果最好......
background-image
也会工作......渐变需要先来......继续前行 . 这里的绝对关键是渐变使用 at least 1 RGBA颜色......颜色需要透明才能让图像通过 . (
rgba(20,20,20,***0.5***)
) . 首先将渐变放在你的css中,将渐变放在图像的顶部,因此RGB上的alpha设置越低,你看到的图像就越多 .另一方面,如果你使用相反的顺序,PNG需要具有透明属性,就像渐变一样,让渐变透过 . 图像在顶部,因此您的PNG需要在带有alpha区域的Photoshop中保存为24位...或者带有alpha区域的烟花中的32位(或者我猜的是gif ... barf),所以你可以看到下面的渐变 . 在这种情况下,渐变可以使用HEX RGB或RGBA .
这里的关键区别是外观 . 在顶部时,图像将更加生动 . 在下面,您可以在浏览器中调整RGBA值以获得所需的效果...而不是在图像编辑软件中来回编辑和保存 .
希望这有帮助,请原谅我的过度简化 .
这可以使用多种背景语法:
我在Here's One Solution读到了这个 .
透明图像还不是CSS标准,但大多数现代浏览器都支持它们 . 但是,这是W3C CSS3建议的一部分 . 实现因客户端而异,因此您必须使用多种语法来实现跨浏览器兼容性 .
http://www.handycss.com/effects/transparent-image-in-css/