JSFiddle - React, Tailwind, and code Playground

by foru17

HTML

<body>
    <div id="img" class="img noise">
         <h1>CSS-Noise</h1>
         <h2>罗磊的独立博客</h2>
         <h2>右边添加了杂色</h2>
    </div>
</body>

CSS

.img {
    border-radius: 30px;
    width: 600px;
    height: 400px;
    background: #f0f0f0;
    background:url('http://luolei.org/wp-content/uploads/2012/06/bike2tibet-west.jpg') center center no-repeat;
}
.img h1 {
    font-size: 72px;
    color: #efefef;
    text-shadow: 2px 2px #000;
    margin-left: 20%;
}
.img h2 {
    font-size: 32px;
    color: #efefef;
    text-shadow: 1px 1px #000;
    margin-left: 35%;
    margin-top: 32%;
}
.noise {
    position: relative;
    z-index: 1;
}
.noise:before, .body-noise:before {
    content: ""; /*必须标明*/
    position: absolute; /*必须标明*/
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 0;
    background-image:...