div+css实现发黄的旧的纸张背景效果代码-html代码-BFW代码库

div+css实现发黄的旧的纸张背景效果代码

代码语言：html

所属分类：背景

代码描述：div+css实现发黄的旧的纸张背景效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Zeyada&amp;display=swap'>
  
<style>
@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');
body {
 font-family: "MedievalSharp", cursive;
	margin: 0;
	place-items: center;
	background-color: aliceblue;
	padding: 4rem;
	font-size: 18px;
}

.layout {
	display: grid;
	gap: 4rem;
}
.paper {
	padding: 2rem;
	position: relative;
	box-sizing: border-box;
}

.paper:before {
	background-image: radial-gradient(#E3E3D2,#B0B096);
	content: ' ';
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	z-index: -1;
	display: block;
		filter: url("#crumple-effect")
		/* this is the where the SVG effect defined in the HTML panel is applied in the CSS */
		drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}

.paper:nth-of-type(2) {
	 grid-row-end: span 2;
}
</style>


  
  
</head>

<body translate="no">
  <div class="layout">
	<div class="paper">
		Lorem ipsum dolor sit amet, consectetur adipiscing enit. Duis tincidunt vulputate condimentum. Ut congue aliquet orci, vel faucibus diam ornare eget. Donec eleifend et orci et finibus. Nulla sed eros neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean rutrum justo et ligula pretium, non porta turpis dignissim. Suspendisse vitae cursus turpis.
	</div>.........完整代码请登录后点击上方下载按钮下载查看