Question

今天我设计的透明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会保持动态高度 - 有时很短，有时非常高。我知道这个渐变不是必不可少的，但我认为可能值得问你们所想的是什么。

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

Answer 1

请记住，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。}

Answer 2

图像和渐变的顺序非常关键，我想说清楚。渐变/图像组合最适合这样......

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需要在带有alpha区域的Photoshop中保存为24位...或者带有alpha区域的烟花中的32位（或者我猜的是gif ... barf），所以你可以看到下面的渐变。在这种情况下，渐变可以使用HEX RGB或RGBA。

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

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

Answer 3

您可以使用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);

Answer 4

使用多种背景语法可以实现这一点：

.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了解了这一点。

Answer 5

已更新

* {
  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>

**正常工作**

Answer 6

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

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

透明背景图像与渐变

6 个答案: