<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>
uj5u.com熱心網友回復：
你說的是底下的白色區域還是白色的字體部分uj5u.com熱心網友回復：
讓白色區域里的字體變清晰uj5u.com熱心網友回復：
<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>
uj5u.com熱心網友回復：
不是這種效果，
uj5u.com熱心網友回復：
應該是這種效果轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/242647.html
標籤：HTML(CSS)