如何点击模糊的太阳?

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);
}

您可以在此演示中实时查看它。

Answer 1

父元素上的模糊效果将应用于子元素，因此您不能以这种方式使用它。

您可以做的是用容器包装这两个元素，并将它们相对于容器元素放置：

.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 2

我已经创建了一个父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 3

您还可以使用box-shadow并重新缩放范围，以便可以;)读取。

添加了单击时的切换效果，以通过选项卡索引查看阴影中的类似模糊效果

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>