每日一练:延期了十几天了今天补上一个鼠标经过图片变暗的效果

虫子君
虫子君
虫子君
17
文章
278
评论
2018年10月21日12:35:15 评论 122 1318字阅读4分23秒

好久没练习编程了,之前在慕课网购买的课时,昨天都已经提示我快到期了,想想一百八十天真快啊,自己还是仅仅学习到,css这里,目前对css掌握的仅仅只能够说是刚刚及格吧。谈不上能够做项目。自己蛮失败的,今年要不是遇上这么一茬子事儿,真不会这样子的吧。

现在每天都在加班,而且公司配的电脑居然贼难用。

今天利用hover事件做了一个鼠标停留图片上面变暗的效果,其实实现起来有简单的方法,也有复杂的方法。

复杂的方法是利用display:block;显示与隐藏的方式。这种需要分清div之间的关系,当前的我实现起来还是有些吃力。

使用position绝对定位属性实现起来相对来说更加的简单一些,只需要设置一下div的层级,就可以了。

每日一练:延期了十几天了今天补上一个鼠标经过图片变暗的效果

展开

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="utf-8" http-equiv="content-type" content="text/html">
	<style type="text/css">
		*{margin:0;padding:0;}
		.con{
			width:600px;
			margin:0 auto;
			margin-top:50px;
		}
		.con img{
			width:600px;
			position:absolute;
			z-index:2;
		}
		.con .content{
			width:600px;
			height:375px;
			background-color:#000;
			position:absolute;
			top:50px;
			
		}
		.con img:hover{
			transition:all 1s;
			opacity:0.7;
		}
	</style>
	<title>遮罩效果</title>
</head>
<body>
<div class="con">
	<img src="banner.jpg">
	<div class="content"></div>
</div>
</body>
</html>

第二个:第二个是自己中午想的,就是利用父元素的div填充一层背景色,如果不填充颜色或者填充为白色就是加亮显示。图片显示的效果就是加亮效果,反之填充为黑色就是深色效果。

相对来说代码量,比第一个更少一些,就是一个div和一个img标签就能够搞定。

展开

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="utf-8" http-equiv="content-type" content="text/html">
	<style type="text/css">
		*{margin:0;padding:0;}
		.box{
			width:600px;
			height:375px;
			margin:100px auto;
			background-color:#000;
		}
		.box img{
			width:600px;
		}
		.box img:hover{
			transition:2s;
			opacity:0.7;
		}
	</style>
	<title>简单的遮罩</title>
</head>
<body>
<div class="box">
	<img src="banner.jpg">
</div>
</body>
</html>

  • 欢迎来“给我投稿”网友会因为你的帮助而感激。
  • 文章链接:https://chonzi.com/bulletin/6892.html

您必须才能发表评论!