Posts

Showing posts from February 10, 2019

南方群岛

Image
本条目 需要擴充。 (2018年3月30日) 请協助改善这篇條目,更進一步的信息可能會在討論頁或扩充请求中找到。请在擴充條目後將此模板移除。 body.skin-minerva .mw-parser-output table.infobox captiontext-align:center 南方群島 當地名稱: Îles Australes 土布艾島 地理 位置 太平洋 坐标 23°0′S 150°0′W  /  23.000°S 150.000°W  / -23.000; -150.000 坐标: 23°0′S 150°0′W  /  23.000°S 150.000°W ...

CSS clip-path breaks pseudo ::before element stack order

Image
1 I'm trying to create a frosted glass effect on a non-rectangular element but it's not working out. I'm experiencing an odd issue that I can't seem to wrap my head around... The frosted glass effect is easy to accomplish by setting a fixed background-image on the document body, adding a partially transparent background color to the element and creating a ::before pseudo element with the same fixed background-image and applying a blur filter. Like so: body background: url(bg-lanterns.jpg) 0 / cover fixed; main position: relative; margin: 1rem auto; padding: 1rem; height: 600px; width: 800px; background: rgba(255,255,255,0.7); main::before content: ''; z-index: -1; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(bg-lanterns.jpg) 0 / cover fixed; filter: blur(10px); Creating a non-rectangular element is also easy by using clip-path like this: main position: relative; margin: 1rem auto; padding: 1re...