div的不透明度会产生意想不到的结果,并将内容与图像混合在一起 [英] Opacity of div creates unexpected results and blends content with image
问题描述
该图像是一个不带透明度的动画gif。在上面的div里,一切看起来都像预期的那样。图像在它的白色背景上旋转,阻挡了它下面的div的文本内容。
在较低的两个div中,我减少了不透明度并以某种方式创建了文本被叠加在图像的上方。这在第三个div中进一步说明,我在包装上设置了背景颜色。整个事情只是让我感到困惑和意外。
$ b
div.wrapper {位置:相对;填充:15px; border:1px solid #ddd;} img.loader {position:absolute;左:calc(50% - 32px); top:calc(50% - 32px);} div.content-b,div.content-c {opacity:.5;} div.wrapper -c {background-color:#bbb;}
< div class =wrapper> < img class =loadersrc =// zuma-design.com/shared/so/loading-large.gif/> < div class =content-a> Sed sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,totam rem aperiam,eaque ipsa quae ab iso inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo。 Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt。 Neque porro quisquam est,qui dolorem ipsum quia dolor sit amet,consectetur,adipisci velit,sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem。你是否真的希望能够实现这个目标? Quis au autem vel eum iure imure reind renderderit qui in a voluptate velit esse quam nihil molestiae consequatur,vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?< / div>< / div>< div class =wrapper> < img class =loadersrc =// zuma-design.com/shared/so/loading-large.gif/> < div class =content-b> Sed sed ut perspiciatis undecomnis iste natus error sit voluptatem accusantium doloremque laudantium,totam rem aperiam,eaque ipsa quae ab ilo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo。 Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt。 Neque porro quisquam est,qui dolorem ipsum quia dolor sit amet,consectetur,adipisci velit,sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem。你是否真的希望能够实现这个目标? Quis autem vel eum iure imure reind renderderit qui in ea voluptate velit esse quam nihil molestiae consequatur,vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?< / div>< / div>< div class =wrapper wrapper-c> ; < img class =loadersrc =// zuma-design.com/shared/so/loading-large.gif/> < div class =content-c> Sed sed ut perspiciatis undecomnis iste natus error sit voluptatem accusantium doloremque laudantium,totam rem aperiam,eaque ipsa quae ab iso inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo。 Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt。 Neque porro quisquam est,qui dolorem ipsum quia dolor sit amet,consectetur,adipisci velit,sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem。你是否真的希望能够实现这个目标? Quis autem vel eum iure repreurederit qui in ea voluptate velit esse quam nihil molestiae consequatur,vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?< / div>< / div>
$ p $