Question

我试图让一个元素淡化它的周围环境。想象一下灰色的盒子在文本上面。我希望灰色框周围的文字有淡出效果。

非常淡化文本框周围的文字

希望我有意义。感谢你的帮助！

HTML

 <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Deseruntconsequatur nisi nulla odio eligendi sapiente rerum totam commodi          
    quae illo voluptatum soluta aut exercitationem debitis dicta ivermolestia
 </p>

 <div class="box"></div>

CSS

p {
   width: 250px;
  }

div.box {
   width: 50px;
   height: 50px;
   background-color: gray;
   position:absolute;
   top:0;
}

的jsfiddle：https://jsfiddle.net/26t9mL47/

Answer 1

我只想在框中使用box-shadow，设置为页面背景颜色，以给出文本淡出的错觉：

https://jsfiddle.net/26t9mL47/2/

Answer 2

您可以在CSS中使用@keyframes属性：

p {
   width: 250px;
  }

div.box {
   width: 50px;
   height: 50px;
   background-color: gray;
   float:left;
   margin:10px;
}

/* Animation */

@keyframes example {
   from {color: black;}
   to {color: white;}
}


p {
  animation-name: example;
  animation-duration: 2s;
}

<div class="box"></div>

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Deseruntconsequatur nisi nulla odio eligendi sapiente rerum totam commodi          
    quae illo voluptatum soluta aut exercitationem debitis dicta ivermolestia
</p>

设置元素以淡化其周围环境

2 个答案: