CSS 使用纯CSS创建旧纸背景纹理

在本文中，我们将介绍如何使用纯CSS来创建一个旧纸背景纹理。旧纸背景具有独特的复古感，可以为网页或应用程序增加一份古朴的美感。我们将探讨一些CSS属性和技巧，以及如何利用它们来实现这种效果。

阅读更多：CSS 教程

创建背景颜色

为了实现旧纸的纹理效果，我们首先需要设置一个适当的背景颜色。在CSS中，我们可以使用background-color属性来设置背景色。为了创造出旧纸的效果，我们可以使用灰色或黄褐色作为背景色，以模拟古旧的纸张颜色。

body {
  background-color: #f5f5dc; /* 使用黄褐色作为背景颜色 */
}

添加纹理图像

下一步是添加纹理图像来模拟旧纸的纹理效果。我们可以使用CSS的background-image属性来实现。这里我们可以使用一个透明的PNG图片作为纹理图像。可以在网上找到一些免费的纹理图像来使用。

body {
  background-image: url('texture.png'); /* 添加纹理图像的路径 */
  background-repeat: repeat; /* 重复纹理 */
}

在这个例子中，我们将纹理图像设为背景的重复纹理，这样整个页面将被纹理覆盖。

调整透明度以增强效果

在旧纸背景纹理中，纸张通常会透露一些老化的痕迹。要模拟这个效果，我们可以使用CSS的opacity属性来调整纹理图像的透明度。

body {
  background-image: url('texture.png');
  background-repeat: repeat;
  opacity: 0.9; /* 降低纹理图像的透明度 */
}

通过降低透明度，我们可以让纹理图像稍微透出背景色，从而产生出类似老旧纸张的效果。

模拟折叠痕迹

为了使旧纸背景更加真实，我们可以模拟一些折叠痕迹。这可以通过CSS的伪元素(::before和::after)和transform属性来实现。

body {
  background-image: url('texture.png');
  background-repeat: repeat;
  opacity: 0.9;
  position: relative;
}

body::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  width: 50px;
  height: 100px;
  border-bottom: 1px solid #000;
  transform: rotate(-10deg);
}

body::after {
  content: '';
  position: absolute;
  top: 50px;
  right: 20px;
  width: 80px;
  height: 100px;
  border-top: 1px solid #000;
  transform: rotate(5deg);
}

在这个例子中，我们使用body::before伪元素和body::after伪元素分别创建了两条折叠痕迹。通过调整元素的位置、大小和旋转角度等属性，我们可以自定义折叠痕迹的形状和位置。

添加阴影效果

另一个可以增加旧纸背景真实感的技巧是添加阴影效果。我们可以使用CSS的box-shadow属性来实现这个效果。

body {
  background-image: url('texture.png');
  background-repeat: repeat;
  opacity: 0.9;
  position: relative;
  box-shadow: 0px 0px 10px 5px #888888; /* 添加阴影效果 */
}

通过调整box-shadow属性的参数，我们可以控制阴影的大小、颜色和模糊程度。