图片或DIV加滤色、模糊

最新推荐文章于 2022-10-18 08:56:58 发布

宣讯

最新推荐文章于 2022-10-18 08:56:58 发布

阅读量827

点赞数

分类专栏： css

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html lang="en">

<head>
	<meta charset="utf-8">
	<style type="text/css">
		html {
			height: 100%;
			margin: 0px;
			padding: 0px;
		}

		body {
			height: 100%;
			overflow-y: hidden;
		}

		.container {
			width: 100%;
			height: 100%;
		}

		.bg {
			background: #1C1759;
			text-align: center;
		}

		.bg-blur {
			float: left;
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			-webkit-filter: blur(10px);
			-moz-filter: blur(15px);
			-o-filter: blur(15px);
			-ms-filter: blur(15px);
			filter: blur(15px);
		}

		.content {
			/* background-color: #FFFFFF; */
			border-bottom: 2px solid #000;
			border-radius: 2px;
			color: #FFF;
			font-size: 28px;
			font-family: ”微软雅黑”;
			height: 5%;
			width: 100%;
			z-index: 999;
			top:50%;
		}

		.content-front {
			position: absolute;
			left: 10px;
			text-align: center;
		}
		#time{
			font-size: 14px;
		}
	</style>
	
</head>

<body>
	<div class="container">
		<div class="content content-front">图片加模糊滤色
			<span id="time">lalla</span>
		</div>
		<div class="bg bg-blur"></div>
	</div>
	</div>
	<script type="text/javascript">
			function run() {
				var time = new Date(); //获取系统当前时间
				var year = time.getFullYear();
				var month = time.getMonth() + 1;
				var date = time.getDate(); //系统时间月份中的日
				var day = time.getDay(); //系统时间中的星期值
				var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
				var week = weeks[day]; //显示为星期几
				var hour = time.getHours();
				var minutes = time.getMinutes();
				var seconds = time.getSeconds();
				console.log(seconds);
				if (month < 10) {
					month = "0" + month;
				}
				if (date < 10) {
					date = "0" + date;
				}
				if (hour < 10) {
					hour = "0" + hour;
				}
				if (minutes < 10) {
					minutes = "0" + minutes;
				}
				if (seconds < 10) {
					seconds = "0" + seconds;
				}
				//var newDate = year+"年"+month+"月"+date+"日"+week+hour+":"+minutes+":"+seconds;
				document.getElementById("time").innerText= year + "年" + month + "月" + date + "日" + week + hour + ":" + minutes +
					":" + seconds;
				setTimeout('run()', 1000);
			}
	
			run();
		</script>
</body>

</html>

宣讯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片或DIV加滤色、模糊

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style type="text/css"&gt; html { height: 100%; margin: 0px; padding: 0px; }
复制链接

扫一扫

专栏目录