[WEB前端]图片加阴影效果

最新推荐文章于 2022-09-11 12:10:33 发布

Cedric_6

最新推荐文章于 2022-09-11 12:10:33 发布

阅读量1.3k

点赞数 2

分类专栏： Web

本文链接：https://blog.csdn.net/cedric_6/article/details/104835537

版权

Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

图片加阴影效果

有时候想要在图片上面添加字，有时候图片太亮所以字不明显或者不美观，因此想要在图片上加阴影效果。

不加阴影

在这里插入图片描述
background:url(‘图片的相对路径’)

<body>
	<div style="background:url('image/csdn.jpg');text-align:center;width:500px;height:500px;background-size:100%">
		<br><br><h2>CSDN</h2>
	</div>
</body>

加阴影

在这里插入图片描述
在里面嵌套一个div，然后把字体颜色改为白色

<div style="background:url('image/csdn.jpg');text-align:center;width:500px;height:500px;background-size:100%">
		<div style="background:rgba(0,0,0,0.5);width:100%;height:100%;color:white">
			<br><br><h2>CSDN</h2>
		</div>
	</div>

优惠劵

Cedric_6

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[WEB前端]图片加阴影效果

图片加阴影效果有时候想要在图片上面添加字，有时候图片太亮所以字不明显或者不美观，因此想要在图片上加阴影效果。不加阴影background:url(‘图片的相对路径’)<body> <div style="background:url('image/csdn.jpg');text-align:center;width:500px;height:500px;backgro...
复制链接

扫一扫