css3源码之实现条纹背景(纯css)

时间:2016-07-30
本文章向大家介绍使用纯css实现条纹背景(没有使用图片)，主要使用到css3的transparent属性，需要的朋友可以参考一下本文章的源代码。

css3实现条纹背景源代码如下：

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {
  width: 100%;
  height: 100%;
  background-color: #fff;
  background-image: -moz-linear-gradient(-45deg, rgba(0, 0, 0, .2) 25%,
    transparent 25%, transparent 50%, rgba(0, 0, 0, .2) 50%,
    rgba(0, 0, 0, .2) 75%, transparent 75%, transparent);
  background-image: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, .2) 25%,
    transparent 25%, transparent 50%, rgba(0, 0, 0, .2) 50%,
    rgba(0, 0, 0, .2) 75%, transparent 75%, transparent);
  -moz-background-size: 4px 4px;
  background-size: 6px 6px;
}
</style>
</head>
<body>
</body>
</html>

在线运行

随机文章
WEB前端知识点必读
最近更新