如何在css或任何其他方式中向图像添加覆盖_Css_Html_Image

如何在css或任何其他方式中向图像添加覆盖

css html image

如何在css或任何其他方式中向图像添加覆盖,css,html,image,Css,Html,Image,例如，在下图中，没有对实际照片进行任何更改，只是添加了一个黑色叠加我如何使用css实现它？或我如何使用其他软件来完成它这里有一个简单的方法，使用一个伪元素（：：before）和覆盖在图像上方的半透明背景（黑色，不透明度为50%，由rgba定义）。暗img{ 位置：相对位置；宽度：300px； } .暗img img{ 显示：块；宽度：100%； } .dark img：：之前{ 内容：''；位置：绝对位置；排名：0；左：0；底部：0；右：0； z指数：1；背景：rgb

例如，在下图中，没有对实际照片进行任何更改，只是添加了一个黑色叠加

我如何使用css实现它？或我如何使用其他软件来完成它

这里有一个简单的方法，使用一个伪元素（

：：before

）和覆盖在图像上方的半透明背景（黑色，不透明度为50%，由

rgba

定义）

。暗img{
位置：相对位置；
宽度：300px；
}
.暗img img{
显示：块；
宽度：100%；
}
.dark img：：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
z指数：1；
背景：rgba（0,0,0,5）；
}


CSS:
#覆盖层{
位置：固定；/*位于页面内容顶部*/
显示：无；/*默认情况下隐藏*/
宽度：100%；/*全宽（覆盖整页）*/
高度：100%；/*全高（覆盖整页）*/
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0.5）；/*带不透明度的黑色背景*/
z-index:2；/*指定堆栈顺序，以防对其他元素使用不同的顺序*/
光标：指针；/*在悬停时添加指针*/
}

快速简单

<html>
<head>
  <style>
    .your-div {width: 500px; height: auto; background-color: #000;}
    .your-div img {width: 500px; height: auto; opacity: 0.3}
  </style>
</head>
<body>
    <h2>Hello</h2>
<div class="your-div">
  <img src="http://img1.juimg.com/140915/330518-14091516335670.jpg"></div>
</body>
</html>


.您的div{宽度：500px；高度：自动；背景色：#000；}
.您的div img{宽度：500px；高度：自动；不透明度：0.3}
你好

codepen:

还有filter属性：（我想它不是覆盖层）它在大多数较新的浏览器中都能工作，但是IE中有一个“旧”的过滤器，它的工作方式不同，而且由于冲突和命名混乱，人们倾向于避免使用它——但如果你不需要支持IE，这也不错。

<html>
<head>
  <style>
    .your-div {width: 500px; height: auto; background-color: #000;}
    .your-div img {width: 500px; height: auto; opacity: 0.3}
  </style>
</head>
<body>
    <h2>Hello</h2>
<div class="your-div">
  <img src="http://img1.juimg.com/140915/330518-14091516335670.jpg"></div>
</body>
</html>