Question

在我的rails应用程序中，我想改变我的模式，类似于图片中显示的模式：

我想知道，除了在html / css中使用图像之外，还有其他选项可以生成像图像中所示的网站背景。

由于

Answer 1

此css代码段将生成所需的背景。

body {
    background:
        -moz-radial-gradient(#000 10%, transparent 16%),
        -moz-radial-gradient(#000 10%, transparent 16%),
        transparent;
    background:
        -webkit-radial-gradient(#000 10%, transparent 16%),
        -webkit-radial-gradient(#000 10%, transparent 16%),
        transparent;

    -webkit-background-size:7px 7px;
    -moz-background-size:7px 7px;
    background-size:7px 7px;
}

The fiddle for the same

Answer 2

body{
  background: #ccc;
}

.pattern{
  width: 200px;
  height: 200px;
  margin: 15px;
  box-shadow: 2px 2px 10px #000;
  border-radius: 15px;
  border: solid 10px rgba(0, 0, 0, .3);
  display: inline;
  float: left;
  cursor: pointer;
  
}
.pattern:nth-child(1){
  background:
    linear-gradient(-45deg, #000 5px, transparent 50px);
  background-color: #444;
  background-size: 50px 50px;
  
}

.pattern:hover{
  transform: scale(1.1);
}

.pattern:nth-child(2){
  background:
    radial-gradient(#fff 8px, transparent 10px);
  background-color: #111;
  background-size: 50px 50px;
}

.pattern:nth-child(3){
  background:
    radial-gradient(#fff 3px, transparent 5px, #fff 7px, transparent 9px, #fff 11px, transparent 13px, #fff 15px, transparent 17px, #fff 19px, transparent 21px, #fff 23px, transparent 25px, #fff 27px, transparent 29px, #fff 31px, transparent 33px);
  background-color: #111;
  background-size: 30px 30px;
}

.pattern:nth-child(4){
  background:
    linear-gradient(45deg, #fff 3px, transparent 5px, #fff 7px, transparent 9px, #fff 11px, transparent 13px, #fff 15px, transparent 17px, #fff 19px, transparent 21px, #fff 23px, transparent 25px, #fff 27px, transparent 29px, #fff 31px, transparent 33px);
  background-color: #111;
  background-size: 50px 50px;
}

.pattern:nth-child(5){
  background:
    linear-gradient(#fff 3px, transparent 5px, #fff 7px, transparent 9px, #fff 11px, transparent 13px, #fff 15px, transparent 17px, #fff 19px, transparent 21px, #fff 23px, transparent 25px, #fff 27px, transparent 29px, #fff 31px, transparent 33px);
  background-color: #111;
  background-size: 50px 40px;
}

.pattern:nth-child(6){
  background:
    linear-gradient(-0deg, #fff 3px, transparent 5px, #fff 7px, transparent 9px, #fff 11px, transparent 13px, #fff 15px, transparent 17px, #fff 19px, transparent 21px, #fff 23px, transparent 25px, #fff 27px, transparent 29px, #fff 31px, transparent 33px);
  background-color: #111;
  background-size: 40px 50px;
}

.pattern:nth-child(7){
  background:
    linear-gradient(90deg, #fff 3%, transparent 5%, #fff 7%, transparent 9%, #fff 11%, transparent 13%, #fff 15%, transparent 17%, #fff 19%, transparent 21%, #fff 23%, transparent 25%, #fff 27%, transparent 29%, #fff 31%, transparent 33%);
  background-color: #111;
  background-size: 100px 40px;
}

.pattern:nth-child(8){
  background:
    radial-gradient(#fff 20%, transparent 50%), 
    linear-gradient(45deg, #fff 10%, transparent 30%);
  background-color: #111;
  background-size: 15px 15px;
}

.pattern:nth-child(9){
  background: 
    linear-gradient(90deg, #fff 5%, #000  );
  background-color: #111;
  background-size: 15px 15px;
}

.pattern:nth-child(10){
  background: 
    linear-gradient(45deg, #fff 5%, #000  );
  background-color: #111;
  background-size: 15px 15px;
}

.pattern:nth-child(11){
  background: 
    radial-gradient(#fff 5%, #000 40%);
  background-color: #111;
  background-size: 25px 25px;
}

.pattern:nth-child(12){
  background: 
    linear-gradient(45deg, #fff 5%, #111 50%, transparent 40%), 
    linear-gradient(-45deg, #111 5%, #fff 50%, transparent 40%);
  background-color: #111;
  background-size: 20px 20px;
}

.pattern:nth-child(13){
  background: 
    linear-gradient(#fff 5%, #111 10%, transparent 40%),
    linear-gradient(0deg, #fff 5%, #111 10%, transparent 40%),
    radial-gradient(#111 10%, #fff 20%, transparent 30%);
  background-color: #111;
  background-size: 25px 25px;
}

.pattern:nth-child(14){
  background: 
    radial-gradient(#fff 7%, #111 10%, transparent 40%),
    linear-gradient(45deg, #fff 5%, #111 10%, transparent 10%, transparent 90%, #fff 95%);
  background-color: #111;
  background-size: 50px 50px;
}

.pattern:nth-child(15){
  background: 
    radial-gradient(#fff 17%, #111 20%, transparent 40%),
    linear-gradient(45deg, #fff 7%, #111 10%, transparent 10%, transparent 90%, #fff 95%),
    linear-gradient(-45deg, #fff 7%, #111 10%, transparent 10%, transparent 90%, #fff 95%);
  background-color: #111;
  background-size: 40px 40px;
}

.pattern:nth-child(16){
  background:
    radial-gradient(#111 8px, #fff 10px, #fff 15px, transparent 17px),
    radial-gradient(#111 28px, transparent 29px),
    linear-gradient(45deg, #fff 48px, transparent 29px);
  background-color: #444;
  background-size: 50px 50px;
  
}

.pattern:nth-child(17){
  background:
    radial-gradient(transparent 10px, #000 12px, #fff 15px, transparent 17px),
    linear-gradient(transparent 10px, #111 12px, #fff 15px, transparent 17px),
    linear-gradient(0deg, transparent 10px, #111 12px, #fff 15px, transparent 17px);
  background-color: #111;
  background-size: 28px 28px;
  
}

.pattern:nth-child(18){
  background:
    radial-gradient(transparent 8px, #000 5px, #fff 12px, transparent 15px),
    linear-gradient(transparent 15px, #111 18px, #fff 21px, transparent 23px),
    linear-gradient(0deg, transparent 15px, #111 18px, #fff 21px, transparent 23px);
  background-color: #111;
  background-size: 40px 40px;
}

.pattern:nth-child(19){
  background:
    linear-gradient(-15deg, transparent 15px, #111 18px, #fff 21px, transparent 23px),
    linear-gradient(15deg, transparent 15px, #111 18px, #fff 21px, transparent 23px);
  background-color: #111;
  background-size: 25px 92px;
}

.pattern:nth-child(20){
  background:
    linear-gradient(-15deg, transparent 15px, #111 18px, #fff 21px, transparent 23px),
    linear-gradient(75deg, transparent 15px, #111 18px, #fff 21px, transparent 23px),
    linear-gradient(-75deg, transparent 15px, #111 18px, #fff 21px, transparent 23px),
    linear-gradient(15deg, transparent 15px, #111 18px, #fff 21px, transparent 23px);
  background-color: #111;
  background-size: 35px 35px;
}

.pattern:nth-child(21){
  width: 100%;
  height: 200px;
  border: none;
  box-shadow: none;
  
}

.pattern:active{
  width: 100%;
  height: 3000px;
  border: solid 10px #000;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99999;
}

<div class='pattern'></div>
<div class='pattern'></div>
<div class='pattern'></div>
<div class='pattern'></div>
<div class='pattern'></div>
<div class='pattern'></div>
<div class='pattern'></div>
<div class='pattern'></div>
<div class='pattern'></div>
<div class='pattern'></div>
<div class='pattern'></div>
<div class='pattern'></div>
<div class='pattern'></div>
<div class='pattern'></div>
<div class='pattern'></div>
<div class='pattern'></div>
<div class='pattern'></div>
<div class='pattern'></div>
<div class='pattern'></div>
<div class='pattern'></div>
<div class='pattern'></div>

从codepen复制

背景的身体在Html中

2 个答案: