css纹身图 |jquery remove css

/* 创建一个div元素 */
div {
width: 300px;
height: 300px;
position: relative;
background: black;
}
/* 创建伪元素，用来实现纹身图的图案 */
div::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: url('your-image-url.jpg');
background-size: cover;
}
/* 创建遮罩层，用来实现图案只显示在特定区域 */
div::before {
content: '';
position: absolute;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
background: white;
opacity: 0.75;
border-radius: 50%;
}

解释一下上面的代码：

首先，大家创建了一个div元素。这个元素的宽高都是300px，背景颜色为黑色。接下来，大家使用伪元素来实现纹身图的图案。伪元素的位置和大小与父元素相同，背景图案则从预设的图片中获取。设置background-size为cover可以让图案自适应父元素大小。最后，大家再创建一个遮罩层，用来实现图案只显示在特定的区域。这个遮罩层同样是一个伪元素，它的大小和位置通过CSS的属性设置来设定。大家使用border-radius来实现圆形的遮罩层，同时设置opacity属性可以让遮罩层半透明，达到更好的纹身效果。

以上就是CSS纹身图的实现方法。既简单又实用，赶快尝试一下吧！