带有渐变的透明背景图像

Posted 2023-02-16

【中文标题】带有渐变的透明背景图像

【英文标题】：Transparent Background Image with a Gradient

【发布时间】：2011-08-06 14:40:54

【问题描述】：

今天我正在设计一个透明的 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 文件的下方。

我知道这里的一些人会说“只需将渐变应用到您正在制作的 PNG 上” - 但这并不理想，因为 div 将保持动态高度 - 有时非常短，有时非常高。我知道这个渐变不是必要的，但我认为可能值得问问你们大家的想法。

是否可以有背景图片，同时将背景的其余部分保持为渐变？

【参考方案1】：

更新

* 
  margin: 0;
  padding: 0;


html,
body 
width: 100%;
height: 100%;


.hero 
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
position: relative;


.hero::before 
background-image: url(https://images.unsplash.com/photo-1566640269407-436c75fc9495?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80);
background-size: cover;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
opacity: 0.4;

<div class="hero flex-center">
  <div class="hero-message">
    <h1 class="hero-title">Your text</h1>
    <h1 class="hero-sub-title">Your text2</h1>
  </div>
</div>

<div class="not-hero flex-center bg-info">
    <div class="not-hero-message">
      <h1 class="hero-title">Your text</h1>
    </div>
  </div>

** 它正在工作**

【参考方案2】：

您可以使用Transparency and gradients。渐变支持透明度。例如，当堆叠多个背景时，您可以使用它来在背景图像上创建渐变效果。

background: linear-gradient(to right, rgba(255,255,255,0) 20%,
              rgba(255,255,255,1)), url(http://foo.com/image.jpg);

【讨论】：

很遗憾，生成的背景不透明。无论该元素下面的元素是什么样子，它也会淡出为白色。

【参考方案3】：

请记住，CSS 渐变实际上是 image value，而不是某些人可能期望的颜色值。因此，它专门对应于background-image，而不是background-color，或者整个background简写。

本质上，您真正想做的是分层两个背景图像：渐变上的位图图像。为此，您可以在同一个声明中指定它们，并使用逗号分隔它们。首先指定图像，然后是渐变。如果您指定背景颜色，该颜色将始终绘制在最底部的图像下方，这意味着渐变将很好地覆盖它，即使在后备的情况下也可以工作。

因为您包含供应商前缀，所以您需要为每个前缀执行一次，为无前缀执行一次，为回退执行一次（没有渐变）。为避免重复其他值，请使用简写属性¹ 而不是 background 简写：

#mydiv .isawesome  
    background-color: #B1B8BD;
    background-position: 0 0;
    background-repeat: no-repeat;

    /* Fallback */
    background-image: url('../images/sidebar_angle.png');

    /* CSS gradients */
    background-image: url('../images/sidebar_angle.png'), 
                      -moz-linear-gradient(top, #ADB2B6 0%, #ABAEB3 100%);
    background-image: url('../images/sidebar_angle.png'), 
                      -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ADB2B6), color-stop(100%, #ABAEB3));
    background-image: url('../images/sidebar_angle.png'), 
                      linear-gradient(to bottom, #ADB2B6, #ABAEB3);

    /* IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ADB2B6', endColorstr='#ABAEB3', GradientType=0);

不幸的是，这在 IE 中无法正常工作，因为它使用filter 作为渐变，它总是在背景上覆盖。

要解决 IE 的问题，您可以将 filter 和背景图像放在不同的元素中。不过，这将消除 CSS3 多背景的强大功能，因为您可以为所有浏览器进行分层，但这是您必须做出的权衡。如果您不需要支持未实现标准化 CSS 渐变的 IE 版本，您无需担心。

---

¹_{从技术上讲，background-position 和 background-repeat 声明适用于此处的两个层，因为间隙是通过重复值而不是钳位来填充的，但由于 background-position 是它的初始值和background-repeat 对于覆盖整个元素的渐变无关紧要，无关紧要。如何处理分层背景声明的详细信息可以找到here。}

【讨论】：

这是有道理的，我什至没有想过将渐变算作第二个背景变量。谢谢！

是否可以在单独的类中定义它们？例如： .grayButton 在此处定义 grdient .jobsButton 在此处定义背景图像

@djschwartz：什么意思？

编辑了我原来的评论。我想要一个 css 类来定义渐变，另一个 css 类来定义背景图像。

@djschwartz：啊。如果您希望将它们与两个类叠加在同一个元素上，那么不幸的是这是不可能的:(

【参考方案4】：

图像和渐变的顺序在这里很关键，我想明确一点。渐变/图像组合像这样效果最好......

background: -webkit-gradient(linear, top, rgba(0,0,0,0.5), rgba(200,20,200,0.5)), url('../images/plus.png');

background-image 也可以使用...

background-image: -webkit-gradient(linear, top, rgba(0,0,0,0.5), rgba(200,20,200,0.5)), url('../images/plus.png');

渐变需要先出现......才能在顶部。不过这里的绝对关键是渐变使用至少 1 RGBA 颜色...颜色需要透明才能让图像通过。 (rgba(20,20,20,***0.5***))。将渐变放在您的 css 中将渐变放在图像的顶部，因此 RGB 上的 alpha 设置越低，您看到的图像就越多。

另一方面，如果您使用相反的顺序，PNG 需要具有透明属性，就像渐变一样，才能让渐变发光。图像位于顶部，因此您的 PNG 需要在 Photoshop 中保存为 24 位，带有 alpha 区域......或者在烟花中保存为 32 位，带有 alpha 区域（或者我猜是 gif ...... barf），这样你就可以看到下面的渐变。在这种情况下，渐变可以使用 HEX RGB 或 RGBA。

这里的主要区别在于外观。在顶部时，图像会更加生动。在下面时，您可以在浏览器中调整 RGBA 值以获得所需的效果...而不是在图像编辑软件中来回编辑和保存。

希望这会有所帮助，请原谅我的过度简化。

【讨论】：

完美解释！谢谢！！

在 Chrome 中检查时，您给出的第一个代码示例会导致“属性值无效”

谢谢！我看到了很多答案，它是另一种方式（首先是网址），但它不适用于我在 iPhone 上的 safari。

【参考方案5】：

透明图像还不是 CSS 标准，但大多数现代浏览器都支持它们。然而，这是 W3C CSS3 推荐的一部分。实现方式因客户端而异，因此您必须使用多种语法来实现跨浏览器兼容性。

http://www.handycss.com/effects/transparent-image-in-css/

【讨论】：

该链接是关于 div 上的 CSS 不透明度的。它与透明背景图像或渐变无关。

【参考方案6】：

这可以使用多种背景语法：

.example3 
    background-image: url(../images/plus.png), -moz-linear-gradient(top,  #cbe3ba,  #a6cc8b);
    background-image: url(../images/plus.png), -webkit-gradient(linear, left top, left bottom, from(#cbe3ba), to(#a6cc8b));

我在Here's One Solution 上读到了这个。