CSS 带有渐变的透明背景图像

Question

提问by Will D. White

Today I was designing a transparent PNG background that would only sit in the top left of a div, and the rest of the div would maintain a gradient background for all transparent areas of the PNG, and the rest of the div itself.

今天我正在设计一个透明的 PNG 背景，它只会位于 div 的左上角，而 div 的其余部分将为 PNG 的所有透明区域以及 div 本身的其余部分保持渐变背景。

It might be better to explain through the code I thought might work:

通过我认为可能有效的代码来解释可能会更好：

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

What I've been finding is that most browsers pick one or the other - most choosing the gradient since its further down the CSS file.

我发现大多数浏览器会选择一种或另一种 - 大多数浏览器选择渐变，因为它位于 CSS 文件的更下方。

I know some of the guys around here will say "just apply the gradient to the PNG you're making" - but thats not ideal because the div will maintain a dynamic height - sometimes being very short, sometimes being very tall. I know this gradient isn't essentialbut I thought it might be worth asking y'all what you thought.

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

Is it possible to have a background image, while keeping the rest of the background as a gradient?

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

Answer 1

回答by BoltClock

Keep in mind that a CSS gradient is actually an image value, not a color value as some might expect. Therefore, it corresponds to background-imagespecifically, and not background-color, or the entire backgroundshorthand.

请记住，CSS 渐变实际上是一个图像值，而不是某些人可能期望的颜色值。因此，它background-image具体对应于，而不是background-color，或整个background速记。

Essentially, what you're really trying to do is layering twobackground images: a bitmap image over a gradient. To do this, you specify both of them in the same declaration, separating them using a comma. Specify the image first, followed by the gradient. If you specify a background color, that color will always be painted underneath the bottom-most image, which means a gradient will cover it just fine, and it will work even in the case of a fallback.

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

Because you're including vendor prefixes, you will need to do this once for every prefix, once for prefixless, and once for fallback (without the gradient). To avoid having to repeat the other values, use the longhand properties¹instead of the backgroundshorthand:

因为您包括供应商前缀，所以您需要为每个前缀执行一次，一次用于无前缀，一次用于回退（没有渐变）。为避免重复其他值，请使用简写属性¹而不是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);
}

Unfortunately this doesn't work correctly in IE as it uses filterfor the gradient, which it always paints overthe background.

不幸的是，这并不正确，在IE，因为它使用的工作filter渐变，它总是描绘了背景。

To work around IE's issue you can place the filterand the background image in separate elements. That would obviate the power of CSS3 multiple backgrounds, though, since you can just do layering for all browsers, but that's a trade-off you'll have to make. If you don't need to support versions of IE that don't implement standardized CSS gradients, you have nothing to worry about.

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

¹_{Technically, the background-positionand background-repeatdeclarations apply to both layers here because the gaps are filled in by repeating the values instead of clamped, but since background-positionis its initial value and background-repeatdoesn't matter for a gradient covering the entire element, it doesn't matter too much. The details of how layered background declarations are handled can be found here.}

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

Answer 2

回答by J.C. Gras

You can use Transparency and gradients. Gradients support transparency. You can use this, for example, when stacking multiple backgrounds, to create fading effects on background images.

您可以使用透明度和渐变。渐变支持透明度。例如，在堆叠多个背景时，您可以使用它在背景图像上创建淡入淡出效果。

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

Answer 3

回答by Brendan Wolfe

The order of the image and gradient is very KEY here, i want to make that clear. The gradient/image combo works best like this...

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

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

background-imagewill also work...

background-image也将工作...

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

the gradient needs to come first... to go on top. The absolute key here though is that the gradient uses at least1 RGBA color... the color(s) need to be transparent to let the image come through. (rgba(20,20,20,***0.5***)). putting the gradient first in you css places the gradient on top of the image, so the lower the alpha setting on you RGBAs the more you see the image.

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

Now on the other hand if you use the reverse order the PNG needs to have transparent properties, just like the gradient, to let the gradient shine through. The image goes on top so your PNG needs to be saved as a 24 bit in photoshop with alpha areas... or a 32 bit in fireworks with alpha areas (or a gif i guess... barf), so you can see the gradient underneath. In this case the gradient can use HEX RGB or RGBA.

现在另一方面，如果您使用相反的顺序，PNG 需要具有透明属性，就像渐变一样，让渐变闪耀。图像放在最上面，所以你的 PNG 需要在带有 alpha 区域的 photoshop 中保存为 24 位......或者在带有 alpha 区域的烟花中保存为 32 位（或者我猜是 gif ...... barf），这样你就可以看到下面的渐变。在这种情况下，渐变可以使用 HEX RGB 或 RGBA。

The key difference here is the look. The image will be much more vibrant when on top. When underneath you have the ability to tune the RGBA values in the browser to get the desired effect... instead of editing and saving back and forth from your image editing software.

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

Hope this helps, excuse my over simplification.

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

Answer 4

回答by Chris Peckham

This is possible using multiple background syntax:

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

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

I read about this at Here's One Solution.

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

Answer 5

回答by LahiruLKA

UPDATED

更新

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

** It's working**

**它正在工作**

Answer 6

回答by Sohail Bashir

Transparent images are not yet a CSS standard, yet they are supported by most modern browsers. However, this is part of the W3C CSS3 recommendation. Implementation varies from one client to another, so you will have to use more than one syntax for cross-browser compatibility.

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

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

CSS 带有渐变的透明背景图像

提问by Will D. White

回答by BoltClock

回答by J.C. Gras

回答by Brendan Wolfe

回答by Chris Peckham

回答by LahiruLKA

回答by Sohail Bashir

相关推荐

最近更新

标签

CSS 带有渐变的透明背景图像

提问by Will D. White

回答by BoltClock

回答by J.C. Gras

回答by Brendan Wolfe

回答by Chris Peckham

回答by LahiruLKA

回答by Sohail Bashir

相关推荐

CSS 样式化 Google 地图信息窗口

CSS 使用 Jumbotron 容器的输入组大于 Bootstrap 3 中的输入

IE8 CSS Hack - 最好的方法？

CSS 允许 div 覆盖整个页面而不是容器内的区域

相关推荐

最近更新

标签