如何點擊模糊的太陽？

Question

我想提示用戶點擊太陽，所以我想把一些文字放在上面。然而，太陽變得模糊，導致文字也變得模糊！

我試圖覆蓋模糊效果，將文本包裝在span中，但似乎div的類的效果占主導地位。任何想法/想法？

HTML：

<div class="sun">Click</div> 

CSS：

.sun { 
    width: 20em; height: 20em; 
    background: #ffff99; 
    border-radius: 10em; 
    animation: flow 10s infinite alternate; 
    transform:translate(-30%, -30%) scale(0.2); 
    -webkit-filter: blur(10px); 
} 

您可以在此Demo現場查看。

Answer 1

我創建了一個父DIV並設置position:absolute的跨度：

.sun { 
 
    width: 20em; height: 20em; 
 
    background: #ffff99; 
 
    border-radius: 10em; 
 
    animation: flow 10s infinite alternate; 
 
    transform:translate(-30%, -30%) scale(0.2); 
 
    -webkit-filter: blur(10px); 
 
} 
 
.relative { 
 
    position:relative; 
 
} 
 
.absl { 
 
    position:absolute; 
 
    left:46px; 
 
    top:52px; 
 
}

<div class="relative"> 
 
    <div class="sun"></div> 
 
    <span class="absl">Click</span> 
 
</div>

Answer 2

對父元素的模糊效果將應用於子元素，因此您不能以這種方式使用它。

你可以做的是包裝與容器的兩個元素和它們相對定位到容器元素：

.container { 
 
    position: relative; 
 
} 
 
.sun { 
 
    position: absolute; 
 
    width: 20em; height: 20em; 
 
    background: #ffff99; 
 
    border-radius: 10em; 
 
    animation: flow 10s infinite alternate; 
 
    transform:translate(-30%, -30%) scale(0.2); 
 
    -webkit-filter: blur(10px); 
 
} 
 
.container span { 
 
    position: absolute; 
 
    top: 18px; 
 
    left: 45px; 
 
}

<div class="container"> 
 
    <div class="sun"></div> 
 
    <span style="-webkit-filter: blur(0px)">Click</span> 
 
</div>

Answer 3

您也可以使用box-shadow並重新縮放量程以便讀取;）。

添加上點擊一個肘節效應經由看到來自影子一樣模糊效果tabindex

的tabindex內容屬性允許作者控制的元件是否被認爲是可聚焦的，它是否是應該可以使用順序聚焦導航到達，以及爲了順序聚焦導航的目的，元素的相對順序是什麼。名稱「選項卡索引」來自「選項卡」鍵的常用用途，以導航可聚焦元素。術語「標籤」是指通過使用順序聚焦導航可達到的可聚焦元素向前移動。

.sun:first-child { 
 
    width: 20em; 
 
    height: 20em; 
 
    background: #ffff99; 
 
    box-shadow: inset 0 0 4em rgba(255, 255, 255, 0.8), 0 0 5em 1em #ffff99; 
 
    border-radius: 10em; 
 
    animation: flow 10s infinite alternate; 
 
    transform: translate(-30%, -30%) scale(0.2); 
 
    transition: 0.25s; 
 
} 
 

 
[tabindex] { 
 
    cursor: pointer; 
 
} 
 

 
.sun+.sun { 
 
    width: 20em; 
 
    height: 20em; 
 
    background: #ffff99; 
 
    border-radius: 10em; 
 
    animation: flow 10s infinite alternate; 
 
    transform: translate(-30%, -90%) scale(0.2); 
 
    -webkit-filter: blur(10px); 
 
} 
 

 
span { 
 
    display: inline-block; 
 
    transform: scale(5); 
 
    transform-origin:top left; 
 
} 
 

 
.sun:first-child:focus { 
 
    pointer-events: none; 
 
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.8), 0 0 0 0 #ffff99; 
 
} 
 
body { 
 
background:skyblue; /* ;) */

<div class="sun" tabindex="0"><span style="-webkit-filter: blur(0px)">Click to toggle blur</span></div> 
 
<div class="sun"><span style="-webkit-filter: blur(0px)">original</span></div>