有没有办法制作嘈杂且不规则的背景（css）？

Question

我想让整个页面的背景看起来像这样：https://4.bp.blogspot.com/-VXE8j0Xanb0/UhpTOEDX3BI/AAAAAAAAASk/KJ_mHmdCYDQ/s1600/Bekennerschreiben+RAF.jpg（嘈杂且不规则的纹理）。

我试过 css 像这样的生成器 https://www.cssstylekit.com/css-noise-texture-generator.html 但毕竟纹理对我来说是规则的...

提前致谢！

Answer 1

是的，您可以尝试使用以下技巧：

#noise-test {
    
    position: relative;
    z-index: 1;
    background-color: white;
    height: 300px;
    width: 100%;
}
    
#noise-test:before {
    
    content: "";
    position: absolute;
    z-index: -2;
    top:0;
    bottom:0;
    left:0;
    right:0;
       
    opacity: 0.25;
    
    background-image:
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px),    
    radial-gradient(black 0px, transparent 1px),    
    radial-gradient(black 0px, transparent 1px),
    radial-gradient(black 0px, transparent 1px),
    radial-gradient(black 0px, transparent 1px),
    radial-gradient(black 0px, transparent 1px),
    radial-gradient(black 0px, transparent 1px),
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px), 
    radial-gradient(black 0px, transparent 1px),    
    radial-gradient(black 0px, transparent 1px),    
    radial-gradient(black 0px, transparent 1px),
    radial-gradient(black 0px, transparent 1px),
    radial-gradient(black 0px, transparent 1px),
    radial-gradient(black 0px, transparent 1px),
    radial-gradient(black 0px, transparent 1px);  
     
    
    background-position:
        23px 8px, 6px 98px, 39px 11px, 46px 98px, 57px 91px, 19px 78px, 61px 88px, 21px 83px, 84px 25px, 27px 34px, 48px 46px, 78px 85px, 3px 31px, 92px 23px, 64px 77px, 29px 17px, 82px 7px, 58px 10px, 84px 35px, 41px 42px, 87px 62px, 69px 22px, 30px 89px, 38px 74px, 26px 29px, 85px 39px, 7px 84px, 38px 18px, 65px 83px, 79px 25px, 73px 93px, 54px 89px, 22px 52px, 14px 62px, 19px 47px, 56px 72px, 27px 2px, 48px 7px, 95px 5px, 34px 78px, 39px 72px, 92px 71px, 54px 50px, 60px 48px, 8px 59px, 12px 17px, 13px 89px, 83px 88px, 46px 60px, 95px 68px;

    background-size:
        31px 31px,
        29px 29px,
        23px 23px,
        19px 19px,
        17px 17px,
        13px 13px,
        11px 11px,
        31px 31px,
        29px 29px,
        23px 23px,
        19px 19px,
        17px 17px,
        13px 13px,
        11px 11px,
        31px 31px,
        29px 29px,
        23px 23px,
        19px 19px,
        17px 17px,
        13px 13px,
        11px 11px,
        31px 31px,
        29px 29px,
        23px 23px,
        19px 19px,
        17px 17px,
        13px 13px,
        11px 11px,
        31px 31px,
        29px 29px,
        23px 23px,
        19px 19px,
        17px 17px,
        13px 13px,
        11px 11px,
        31px 31px,
        29px 29px,
        23px 23px,
        19px 19px,
        17px 17px,
        13px 13px,
        11px 11px;
    
    }

<div id="noise-test">
</div>

不过你也可以考虑使用更方便的JS脚本

function dots(n){
  let r='';
  for(let i=0; i<n; i++) {
    let x= window.innerWidth * Math.random();
    let y= window.innerHeight * Math.random();
    r+=`<div class="box" style="left: ${x}px; top: ${y}px" >`;
  }
  return r;
}

document.body.innerHTML += dots(2000);

.box {
  background-color: #000;
  position: fixed;
  width: 2px;
  height: 2px;
}

有没有办法制作嘈杂且不规则的背景（css）？

Is there a way to make a noisy and irregular background (with css)?

css

background

noise