Html 具有颜色和透明度的 CSS 图像叠加

CSS image overlay with color and transparency

提问by srtstripes

I am trying to figure out if I can add an overlay to an image like a tint and change the opacity without adding background color. I had no luck so I thought I would ask here.
I would like to make it red with that opacity.here is what I have so far.

我想弄清楚我是否可以像色调一样向图像添加叠加层，并在不添加背景颜色的情况下更改不透明度。我运气不好，所以我想我会在这里问。
我想用这种不透明度把它变成红色。这是我到目前为止所拥有的。

I made an image to overlay it if I have to called overlay.png but don't know if its necessary.

如果我必须调用overlay.png，我制作了一个图像来覆盖它，但不知道是否有必要。

img.highlighted {
   opacity:0.4;
}

Basically I want to do this but reverse, for image to tint when hovered not to take the tint away when hovered.
check it out here
http://jsbin.com/igahay/3011/edit

基本上我想这样做但反过来，图像在悬停时着色，而不是在悬停时去除色调。
在这里查看
http://jsbin.com/igahay/3011/edit

回答by gmo

CSS Filter Effects

CSS 滤镜效果

^{It's not fully cross-browserssolution, but must work well in most modern browser.}

^{它不是完全跨浏览器的解决方案，但必须在大多数现代浏览器中运行良好。}

<img src="image.jpg" />
<style>
    img:hover {
        /* Ch 23+, Saf 6.0+, BB 10.0+ */
        -webkit-filter: hue-rotate(240deg) saturate(3.3) grayscale(50%);
        /* FF 35+ */
        filter: hue-rotate(240deg) saturate(3.3) grayscale(50%);
    }
</style>

EXTERNAL DEMO PLAYGROUND

外部演示游乐场

• CSS Filter Effects

• CSS 滤镜效果

IN-HOUSE DEMO SNIPPET(source:simpl.info)

内部演示片段（来源：simpl.info）

#container {
  text-align: center;
}

.blur {
  filter: blur(5px)
}

.grayscale {
  filter: grayscale(1)
}

.saturate {
  filter: saturate(5)
}

.sepia {
  filter: sepia(1)
}

.multi {
  filter: blur(4px) invert(1) opacity(0.5)
}

<div id="container">

  <h1><a href="https://simpl.info/cssfilters/" title="simpl.info home page">simpl.info</a> CSS filters</h1>

  <img src="https://simpl.info/cssfilters/balham.jpg" alt="No filter: Balham High Road and a rainbow" />
  <img class="blur" src="https://simpl.info/cssfilters/balham.jpg" alt="Blur filter: Balham High Road and a rainbow" />
  <img class="grayscale" src="https://simpl.info/cssfilters/balham.jpg" alt="Grayscale filter: Balham High Road and a rainbow" />
  <img class="saturate" src="https://simpl.info/cssfilters/balham.jpg" alt="Saturate filter: Balham High Road and a rainbow" />
  <img class="sepia" src="https://simpl.info/cssfilters/balham.jpg" alt="Sepia filter: Balham High Road and a rainbow" />
  <img class="multi" src="https://simpl.info/cssfilters/balham.jpg" alt="Blur, invert and opacity filters: Balham High Road and a rainbow" />

  <p><a href="https://github.com/samdutton/simpl/blob/gh-pages/cssfilters" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a></p>

</div>

NOTES

笔记

• This property is significantly different from and incompatible with Microsoft's older "filter" property
• Edge, element or it's parent can't have negative z-index (see bug)
• IEuse old school way (link) ^{thanks @Costa}

• 此属性与 Microsoft较旧的“过滤器”属性明显不同且不兼容
• Edge、 element 或其父元素不能具有负 z-index （请参阅bug）
• IE使用老派方式（链接）^谢谢@Costa

RESOURCES:

资源：

• Specification[w3.org] w3 ref
• Documentation[developer.mozilla.org] doc
• Chrome platform status: [chromestatus.com] officialstatus
• Browser support[caniuse.com] ref
• Say Hello to Webkit Filters[tutsplus.com] info
• Understanding CSS Filters Effect[html5rocks.com] doc

• 规范[w3.org]w3 ref
• 文档[developer.mozilla.org]doc
• Chrome 平台状态：[chromestatus.com]officialstatus
• 浏览器支持[caniuse.com]ref
• 向 Webkit 过滤器问好[tutsplus.com]info
• 了解 CSS 过滤器效果[html5rocks.com]doc

回答by Girisha C

JSFiddle Demo

JSFiddle 演示

HTML:

HTML:

<div class="image-holder">
    <img src="http://codemancers.com/img/who-we-are-bg.png" />
</div>

CSS:

CSS:

.image-holder {
    display:inline-block;
    position: relative;
}
.image-holder:after {
    content:'';
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background: blue;
    opacity: 0.1;
}
.image-holder:hover:after {
    opacity: 0;
}

回答by Hristo Valkanov

If you want to make the reverse of what you showed consider doing this:

如果您想与您展示的相反，请考虑这样做：

.tint:hover:before {
    background: rgba(0,0,250, 0.5);

  }

  .t2:before {
    background: none;
  }

and look at the effect on the 2nd picture.

并查看第二张图片上的效果。

Is it supposed to look like this?

它应该看起来像这样吗？

回答by acudars

Have you given a try to Webkit Filters?

您是否尝试过Webkit 过滤器？

You can manipulate not only opacity, but colour, brightness, luminosity and other properties:

您不仅可以操纵不透明度，还可以操纵颜色、亮度、光度和其他属性：

回答by Juan Rangel

something like this? http://codepen.io/Nunotmp/pen/wKjvB

像这样的东西？http://codepen.io/Nunotmp/pen/wKjvB

You can add an empty divand use absolute positioning.

您可以添加一个空的div并使用绝对定位。