清香 发表于 2021-5-29 18:35:46

如何让白色的那部分清晰

<style type="text/css">
            * {
                margin: 0;
                padding: 0;
                list-style: none;
                text-decoration: none;
            }

            .blur {
                width: 100%;
                height: 400px;
                box-sizing: border-box;
                padding: 40px 10px;
                background-color: black;
                color: white;
                filter: blur(2px);
                position: relative;
            }

            .blur ul {
                display: flex;
                justify-content: space-around;
                box-sizing: border-box;
                padding: 10px;
                z-index: 2;
            }
            .qing {
                width: 300px;
                height: 400px;
                background-color: white;
                position: absolute;
                top: 0;
                left: 40%;
                opacity: .3;
                transform: skew(-30deg);
                -webkit-transform: skew(-30deg);
                -moz-transform: skew(-30deg);
                -o-transform: skew(-30deg);
                -ms-transform: skew(-30deg);
            }
      </style><div class="blur">
                <ul>
                  <li>aaaaaaaaaaaaaa</li>
                  <li>bbbbbbbbbbbbbbbb</li>
                  <li>ccccccccccc</li>
                  <li>dddddddddddddd</li>
                </ul>
                <ul>
                  <li>aaaaaaaaaaaaaa</li>
                  <li>bbbbbbbbbbbbbbbb</li>
                  <li>ccccccccccc</li>
                  <li>dddddddddddddd</li>
                </ul>
                <ul>
                  <li>aaaaaaaaaaaaaa</li>
                  <li>bbbbbbbbbbbbbbbb</li>
                  <li>ccccccccccc</li>
                  <li>dddddddddddddd</li>
                </ul>
                <div class="qing">
               
                </div>
            </div>

丽莎 发表于 2021-5-30 09:26:33

你说的是底下的白色区域还是白色的字体部分

花未全开月未全圆 发表于 2021-6-1 11:06:01

<style type="text/css">
            * {
                margin: 0;
                padding: 0;
                list-style: none;
                text-decoration: none;
            }

            .blur {
                width: 100%;
                height: 400px;
                box-sizing: border-box;
                padding: 40px 10px;
                background-color: black;
                color: white;
                filter: blur(2px);
                position: relative;
            }
ul {
                display: flex;
                justify-content: space-around;
                box-sizing: border-box;
                padding: 10px;
                z-index: 2;
            }
            .qing {
                width: 300px;
                height: 400px;
                background-color: white;
                position: absolute;
                top: 0;
                left: 40%;
                opacity: .3;
                transform: skew(-30deg);
                -webkit-transform: skew(-30deg);
                -moz-transform: skew(-30deg);
                -o-transform: skew(-30deg);
                -ms-transform: skew(-30deg);
            }
      </style>

<div>
<div class="blur" style="z-index:-1;float:left;position:absolute;">
               
            </div>
<div style="z-index:9999;color:white;">
<ul >
                  <li>aaaaaaaaaaaaaa</li>
                  <li>bbbbbbbbbbbbbbbb</li>
                  <li>ccccccccccc</li>
                  <li>dddddddddddddd</li>
                </ul>
                <ul>
                  <li>aaaaaaaaaaaaaa</li>
                  <li>bbbbbbbbbbbbbbbb</li>
                  <li>ccccccccccc</li>
                  <li>dddddddddddddd</li>
                </ul>
                <ul>
                  <li>aaaaaaaaaaaaaa</li>
                  <li>bbbbbbbbbbbbbbbb</li>
                  <li>ccccccccccc</li>
                  <li>dddddddddddddd</li>
                </ul>
                <div class="qing">
               
                </div>
</div>
</div>
页: [1]
查看完整版本: 如何让白色的那部分清晰