Question

我想暗示用户点击太阳，所以我想把一些文字放在它上面。然而，太阳模糊，导致文字模糊不清！

我试图覆盖模糊效果，将文本包装在div中，但似乎来自<div class="sun">Click</div>的类的效果占主导地位。有什么想法/想法吗？

HTML：

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

CSS：

IsAssignableFrom

您可以在 Demo 中实时查看。

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我创建了一个父div并将position:absolute设置为span：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您也可以使用box-shadow并重新缩放范围，以便可以阅读;）。

在点击上添加了一个切换效果，通过tabindex

从阴影中查看相似的模糊效果

tabindex内容属性允许作者控制元素是否应该是可聚焦的，是否应该使用顺序焦点导航可以到达，以及元素的相对顺序是什么顺序焦点导航。名称＆＃34;标签索引＆＃34;来自＆＃34;标签的常用用法＆＃34;浏览可聚焦元素的关键。术语＆＃34; tabbing＆＃34;是指使用顺序焦点导航向前移动可到达的可聚焦元素。

＆＃13;

.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; /* ;) */

＆＃13;

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

＆＃13;

如何点击模糊的太阳？

3 个答案: