设为首页收藏本站
开启辅助访问 切换到宽版

小白教程

 找回密码
 立即注册
热搜: python PHP html
小白教程»小白交流区 › 技术交流区 › html5和css › 如何让白色的那部分清晰
返回列表 发新帖
查看: 8240|回复: 2

[已解决]如何让白色的那部分清晰

[复制链接]
清香

1

主题

2

帖子

5

积分

新手上路

Rank: 1

积分
5
发表于 2021-5-29 18:35:46 | 显示全部楼层 |阅读模式
  1. <style type="text/css">
  2.             * {
  3.                 margin: 0;
  4.                 padding: 0;
  5.                 list-style: none;
  6.                 text-decoration: none;
  7.             }

  9.             .blur {
  10.                 width: 100%;
  11.                 height: 400px;
  12.                 box-sizing: border-box;
  13.                 padding: 40px 10px;
  14.                 background-color: black;
  15.                 color: white;
  16.                 filter: blur(2px);
  17.                 position: relative;
  18.             }

  20.             .blur ul {
  21.                 display: flex;
  22.                 justify-content: space-around;
  23.                 box-sizing: border-box;
  24.                 padding: 10px;
  25.                 z-index: 2;
  26.             }
  27.             .qing {
  28.                 width: 300px;
  29.                 height: 400px;
  30.                 background-color: white;
  31.                 position: absolute;
  32.                 top: 0;
  33.                 left: 40%;
  34.                 opacity: .3;
  35.                 transform: skew(-30deg);
  36.                 -webkit-transform: skew(-30deg);
  37.                 -moz-transform: skew(-30deg);
  38.                 -o-transform: skew(-30deg);
  39.                 -ms-transform: skew(-30deg);
  40.             }
  41.         </style>
复制代码
  1. <div class="blur">
  2.                 <ul>
  3.                     <li>aaaaaaaaaaaaaa</li>
  4.                     <li>bbbbbbbbbbbbbbbb</li>
  5.                     <li>ccccccccccc</li>
  6.                     <li>dddddddddddddd</li>
  7.                 </ul>
  8.                 <ul>
  9.                     <li>aaaaaaaaaaaaaa</li>
  10.                     <li>bbbbbbbbbbbbbbbb</li>
  11.                     <li>ccccccccccc</li>
  12.                     <li>dddddddddddddd</li>
  13.                 </ul>
  14.                 <ul>
  15.                     <li>aaaaaaaaaaaaaa</li>
  16.                     <li>bbbbbbbbbbbbbbbb</li>
  17.                     <li>ccccccccccc</li>
  18.                     <li>dddddddddddddd</li>
  19.                 </ul>
  20.                 <div class="qing">
  21.                  
  22.                 </div>
  23.             </div>
复制代码


最佳答案
花未全开月未全圆
2021-6-1 11:06:01
  1. <style type="text/css">
  2.             * {
  3.                 margin: 0;
  4.                 padding: 0;
  5.                 list-style: none;
  6.                 text-decoration: none;
  7.             }

  9.             .blur {
  10.                 width: 100%;
  11.                 height: 400px;
  12.                 box-sizing: border-box;
  13.                 padding: 40px 10px;
  14.                 background-color: black;
  15.                 color: white;
  16.                 filter: blur(2px);
  17.                 position: relative;
  18.             }
  19. ul {
  20.                 display: flex;
  21.                 justify-content: space-around;
  22.                 box-sizing: border-box;
  23.                 padding: 10px;
  24.                 z-index: 2;
  25.             }
  26.             .qing {
  27.                 width: 300px;
  28.                 height: 400px;
  29.                 background-color: white;
  30.                 position: absolute;
  31.                 top: 0;
  32.                 left: 40%;
  33.                 opacity: .3;
  34.                 transform: skew(-30deg);
  35.                 -webkit-transform: skew(-30deg);
  36.                 -moz-transform: skew(-30deg);
  37.                 -o-transform: skew(-30deg);
  38.                 -ms-transform: skew(-30deg);
  39.             }
  40.         </style>

  42. <div>
  43. <div class="blur" style="z-index:-1;float:left;position:absolute;">
  44.                
  45.             </div>
  46. <div style="z-index:9999;color:white;">
  47. <ul >
  48.                     <li>aaaaaaaaaaaaaa</li>
  49.                     <li>bbbbbbbbbbbbbbbb</li>
  50.                     <li>ccccccccccc</li>
  51.                     <li>dddddddddddddd</li>
  52.                 </ul>
  53.                 <ul>
  54.                     <li>aaaaaaaaaaaaaa</li>
  55.                     <li>bbbbbbbbbbbbbbbb</li>
  56.                     <li>ccccccccccc</li>
  57.                     <li>dddddddddddddd</li>
  58.                 </ul>
  59.                 <ul>
  60.                     <li>aaaaaaaaaaaaaa</li>
  61.                     <li>bbbbbbbbbbbbbbbb</li>
  62.                     <li>ccccccccccc</li>
  63.                     <li>dddddddddddddd</li>
  64.                 </ul>
  65.                 <div class="qing">
  66.                  
  67.                 </div>
  68. </div>
  69. </div>
复制代码

本帖寻求最佳方案

，目前已有 2 个回复 我要奖励
回复

使用道具 举报

丽莎

0

主题

1

帖子

1

积分

新手上路

Rank: 1

积分
1
发表于 2021-5-30 09:26:33 | 显示全部楼层
你说的是底下的白色区域还是白色的字体部分
回复

使用道具 举报

花未全开月未全圆

1

主题

3

帖子

5

积分

新手上路

Rank: 1

积分
5
发表于 2021-6-1 11:06:01 | 显示全部楼层 &
  1. <style type="text/css">
  2.             * {
  3.                 margin: 0;
  4.                 padding: 0;
  5.                 list-style: none;
  6.                 text-decoration: none;
  7.             }

  9.             .blur {
  10.                 width: 100%;
  11.                 height: 400px;
  12.                 box-sizing: border-box;
  13.                 padding: 40px 10px;
  14.                 background-color: black;
  15.                 color: white;
  16.                 filter: blur(2px);
  17.                 position: relative;
  18.             }
  19. ul {
  20.                 display: flex;
  21.                 justify-content: space-around;
  22.                 box-sizing: border-box;
  23.                 padding: 10px;
  24.                 z-index: 2;
  25.             }
  26.             .qing {
  27.                 width: 300px;
  28.                 height: 400px;
  29.                 background-color: white;
  30.                 position: absolute;
  31.                 top: 0;
  32.                 left: 40%;
  33.                 opacity: .3;
  34.                 transform: skew(-30deg);
  35.                 -webkit-transform: skew(-30deg);
  36.                 -moz-transform: skew(-30deg);
  37.                 -o-transform: skew(-30deg);
  38.                 -ms-transform: skew(-30deg);
  39.             }
  40.         </style>

  42. <div>
  43. <div class="blur" style="z-index:-1;float:left;position:absolute;">
  44.                
  45.             </div>
  46. <div style="z-index:9999;color:white;">
  47. <ul >
  48.                     <li>aaaaaaaaaaaaaa</li>
  49.                     <li>bbbbbbbbbbbbbbbb</li>
  50.                     <li>ccccccccccc</li>
  51.                     <li>dddddddddddddd</li>
  52.                 </ul>
  53.                 <ul>
  54.                     <li>aaaaaaaaaaaaaa</li>
  55.                     <li>bbbbbbbbbbbbbbbb</li>
  56.                     <li>ccccccccccc</li>
  57.                     <li>dddddddddddddd</li>
  58.                 </ul>
  59.                 <ul>
  60.                     <li>aaaaaaaaaaaaaa</li>
  61.                     <li>bbbbbbbbbbbbbbbb</li>
  62.                     <li>ccccccccccc</li>
  63.                     <li>dddddddddddddd</li>
  64.                 </ul>
  65.                 <div class="qing">
  66.                  
  67.                 </div>
  68. </div>
  69. </div>
复制代码
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|小白教程 ( 粤ICP备20019910号 )

GMT+8, 2024-9-20 12:40 , Processed in 0.024459 second(s), 25 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc. Template By 【未来科技】【 www.wekei.cn 】

快速回复 返回顶部 返回列表