<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; /* 消除边界*/ padding: 0; } body{ position: relative; /*为下面的absolute提供父元素定位*/ height: 5000px; /*此可以预先设置你需要做的网站的高度，也可以不用设置，但需要一定的内容支撑*/ } #box1::before{ /*使用before 选择器在被选元素的内容前面插入内容。*/ width: 100%; height: 100%; /*设置为全屏背景模式*/ background-image: url(background.jpg); background-size: 100% 100% ; background-attachment: fixed; /*将图片固定*/ position: absolute; /*图片定位*/ top: 0; left: 0; content: ""; z-index: -1; /*设置该标签等级，让其始终位于最上层*/ -webkit-filter: opacity(30%); /*设置透明度 blur还可以改变照片的模糊度*/ filter: opacity(30%); } .box2{ line-height: 100px; font-size: 40px; text-align: center; } </style> </head> <body> <div id="box1" > <div class="box2"> <br><br> <div>CSS中如何实现背景图片透明并且固定和文字不透明效果</div> <div>使用filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();</div> </div> </div> </body> </html>
标签：文字,透明,opacity,效果,100%,height,filter,background From： https://www.cnblogs.com/sheizhuchenfu2/p/17486160.html