Css效果及有趣样式

最新推荐文章于 2024-02-20 09:26:43 发布

小杨小杨、努力变强！

最新推荐文章于 2024-02-20 09:26:43 发布

阅读量84

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_42717015/article/details/130513407

版权

一、设置图片上的文字透明样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
	
		.bg{
			--bg: url('333.jpg')no-repeat center/cover;
			background: var(--bg);
			width: 800px;
			height: 400px;
		}
	
		.zdycs{
			width: 100%;
			height: 100%;
			background: rgb(0,0,0,0.6);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 5vw;
			/* 文字阴影  方法一*/
		/* 	text-shadow: 2px 2px 0 #fff, 
					 -2px 2px 0 #fff, 
					 2px -2px 0 #fff, 
					 -2px -2px 0 #fff; */
			/* 文字阴影 方法二 */		
			text-stroke: 2px #fff;
			 -webkit-text-stroke: 2px #fff;
			 background: var(--bg);
			 background-clip: h2;
			 -webkit-background-clip: h2;
			 /* 设置透明色 */
			 color: transparent;
		}
	</style>
	<body>
		<div class="bg">
			<h2 class="zdycs">大家好才是真的好</h2>
		</div>
	</body>
</html>