是否有办法使背景嘈杂且不规则（带有CSS）？

Question

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

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

提前感谢！

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;
}