鼠标滑过之改变网页图片透明度

最新推荐文章于 2022-07-20 23:50:19 发布

无处安放的小曾

最新推荐文章于 2022-07-20 23:50:19 发布

阅读量1k

点赞数 1

文章标签： css html javascript

本文链接：https://blog.csdn.net/m0_51152186/article/details/122914400

版权

工具：HBuilder X 2.8.8、谷歌浏览器。

一、工程目录如下：

二、编写html代码与设置样式的css文件

homework.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>29节浮动与定位作业</title>
		<link rel="stylesheet" type="text/css" href="css/homework.css"/>
	</head>
	<body>
		<div class="pro_list">
			<!-- 快速生成方法：(div.item>img)*6+Tab -->
			
				<div class="item">
					<img src="img/img01.jpg" alt="">
					<div class="box5">
					</div>
					</div>
				<div class="item">
					<img src="img/img02.jpg" alt="">
					<div class="box5">
					</div>
					</div>
				<div class="item">
					<img src="img/img03.jpg" alt="">
					<div class="box5">
					</div>
					</div>
				<div class="item">
					<img src="img/img04.jpg" alt="">
					<div class="box5">
					</div>
					</div>
				<div class="item">
					<img src="img/img05.jpg" alt="">
					<div class="box5">
					</div>
					</div>
				<div class="item">
					<img src="img/img06.jpg" alt="">
					<div class="box5">
					</div>
					</div>
			
		</div>
	</body>
</html>

homework.css

.pro_list{
	width: 75rem;
	border: 0.0625rem solid pink;
	overflow: hidden;
	
}
.item{
	width: 23.75rem;
	height:14.375rem;
	float: left;
	position: relative;
}
.box5{
	/* 100%的意思是与父类的宽高相同 */
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	/* rgba(,,,)第一个为红色值,第二个为绿色值,第三个为蓝色值,1~255第四个为透明度alpha色彩空间 */
	position: absolute;
	top:0;
	left:0;
}
.item:hover .box5{
	/* hover后面必须有空格 */
	background-color: rgba(0,0,0,0.2);
	
}

三、运行效果图。

无处安放的小曾

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
鼠标滑过之改变网页图片透明度

工具：HBuilder X 2.8.8、谷歌浏览器。一、工程目录如下：二、编写html代码与设置样式的css文件homework.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>29节浮动与定位作业</title> <link rel="stylesheet" type="text/css" href="css..
复制链接

扫一扫