Question

我有一个wordpress网站，我想制作一个欢迎页面，其中包含全屏背景图像和2个小型，响应式和居中的框架（div？），半透明背景但不透明的文字。当光标位于其中一个div上时，我想让它完全不透明，就像这个网站一样：http://www.newzealand.com/

初学者可以帮助我，因为现在我使用包含文字的png但当然我的文字也变成了半透明... 这是我的网站：http://vincentfournet.fr/

非常感谢

Answer 1

您可以更改div.rgba（）的背景样式，为您提供透明度。并使用：hover伪元素。（IE6不支持：将鼠标悬停在div上。如果你需要为那些老浏览器用户提供服务，你可以使用javascript实现兼容性）

<div class='container'>
  <div id='div1'> TEXT HERE </div>
  <div id='div2'> NORE TEXT </div> 
</div>
//css, other styles ommited
#div1:hover, #div2:hover {background: rgba(0,0,0,0.95);} /*95% opaque*/
.container {background: rgba(0,0,0,0.7);}

我认为它会成功。这是演示http://jsfiddle.net/2Rpps/

半透明div，当光标在它们上方时变为不透明

1 个答案: