时间戳

首页 > 解决方案 > 如何在图像上叠加渐变

html - 如何在图像上叠加渐变

问题描述

我正在尝试在图像上覆盖以工作

我在 CSS 上失败了：

  <!DOCTYPE html>
    <html>
    
    <head>
    </head>
    <body>
    <style>
      .image-wrapper{
    	position:relative;
    	display:block;
      }
      .image-overlay:after {
    		position: absolute;
    		top:0;
    		left:0;
    		right:0;
    		bottom:0;
    		background:repeating-linear-gradient(
    		  45deg,
    		  rgba(0, 0, 0, 0.2),
    		  rgba(0, 0, 0, 0.2) 10px,
    		  rgba(0, 0, 0, 0.3) 10px,
    		  rgba(0, 0, 0, 0.3) 20px
    		);
    	  }
    	.module {
    		  background: white;
    		  border: 1px solid #ccc;
    		  margin: 3%;
    		}
    	.module h2 {
    		padding: 1rem;
    		margin: 0 0 0.5rem 0;	
    	}
    	.module p {
    		padding: 0 1rem;	
    	}
    </style>
    <div class="image-wrapper">
      <img height="200" width="200" src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/old_map_@2X.png"/>
      <div class="image-overlay"></div>
    </div>
    </body>
    
    
    </html>

普朗克

我希望覆盖覆盖整个图像

标签： htmlcssoverlay

解决方案

推荐阅读