带有渐变的透明背景图像

| 今天，我正在设计仅位于div左上角的透明PNG背景，而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会保持动态高度-有时会很短，有时会很高。我知道这个梯度不是必需的，但我认为可能值得问您所有的想法。是否可以有背景图像，而其余背景保持渐变？

已邀请:

6 个回复

磐剩

请记住，CSS渐变实际上是图像值，而不是某些人可能期望的颜色值。因此，它具体对应于background-image，而不是background-color或整个background速记。本质上，您真正想做的是将两个背景图像分层：在渐变上的位图图像。为此，请在同一声明中指定它们两者，并用逗号分隔它们。首先指定图像，然后指定渐变。如果指定背景色，则该颜色将始终被绘制在最底下的图像下方，这意味着渐变可以很好地覆盖它，即使在后备情况下也可以使用。由于您要包含供应商前缀，因此您需要为每个前缀执行一次此操作，为无前缀执行一次，并为后备操作执行一次（无渐变）。为避免重复其他值，请使用抄写属性1而不是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版本，则无需担心。 1从技术上讲，here8ѭ和background-repeat声明在此处适用于两层，因为通过重复而不是固定值来填充间隙，但是由于since8ѭ是其初始值，而background-repeat对于覆盖整个元素的渐变并不重要，因此没什么大不了的。有关如何处理分层背景声明的详细信息，请参见此处。

磋判粗惊

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

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值以获得所需的效果...而不是通过图像编辑软件进行编辑和来回保存。希望这会有所帮助，请原谅我过分简化。

殿虫

您可以使用透明度和渐变。渐变支持透明度。例如，当堆叠多个背景时，可以使用此功能在背景图像上创建褪色效果。

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

炬卤遁蝎变

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

.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));
}

我在“这里的一个解决方案”中了解了这一点。

娠侈脚惮顽

更新

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

古擅坛犯

透明图像还不是CSS标准，但是大多数现代浏览器都支持透明图像。但是，这是W3C CSS3建议的一部分。实现因一个客户端而异，因此您必须使用多个语法来实现跨浏览器的兼容性。 http://www.handycss.com/effects/transparent-image-in-css/

要回复问题请先登录或注册

带有渐变的透明背景图像

6 个回复

发起人

css

gradient

css3

background

image

问题状态

带有渐变的透明背景图像

与内容相关的链接

6 个回复

发起人

css

gradient

css3

background

image

问题状态