前端demo：实现背景半透明，div与文本正常显示
生活随笔
收集整理的這篇文章主要介紹了
前端demo：实现背景半透明，div与文本正常显示
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、需求：
背景實現透明度0.3，其他組件正常顯示
二、代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <style>html,body,#ele-body {width: 100%;height: 100%;margin: 0;padding: 0;}#ele-body {position: relative;}#ele-one {opacity: 0.3;position: absolute;width: 100%;height: 100%;background-color: orange;}#ele-two {position: absolute;width: 300px;height: 300px;text-align: center;line-height: 300px;background-color: blueviolet;left: 0;top: 0;bottom: 0;right: 0;margin: auto;} </style><body><div id="ele-body"><div id="ele-one"></div><div id="ele-two">春有百花秋有月</div></div> </body></html>效果顯示：
總結
以上是生活随笔為你收集整理的前端demo：实现背景半透明，div与文本正常显示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Jquery事件、冒泡、委托与节点
- 下一篇： python操作MySQL 模拟简单银行