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  / -23.000; -150.000 群岛 波利尼西亞 总岛屿 7 主要島嶼 土布艾島、魯魯土島、賴瓦瓦埃島、拉帕島 面積 148平方公里(57平方英里) 管轄   法国 海外集體 法屬波利尼西亞 最大聚居地 魯魯土島(人口2,088) 人口统计 人口 6,310 (2007年) [1] 人口密度 43人/(人/mi 2 )   南方群島旗幟 Map of the Austral Islands 南方群岛 (法语: Îles Australes 或 Archipel des Australes ),又叫 土布艾群岛 ,舊譯 奧斯特剌爾群島 ,是大洋洲法属波利尼西亚最南端的群岛。从地理上可分为两个群岛,从西北到东南依次是: 土布艾群岛(法语: Îles Tubuaï ),以主岛名字得名。它包括: 玛丽亚环礁( 21°48′00″S 154°41′00″W  /  21.80000°S 154.68333°W  / -21.80000; -154.68333 ) 里马塔拉岛( 22°38′25″S 152°50′16″W  /  22.64028°S 152.83778°W  / -22.64028; -152.83778 ) 鲁鲁土岛( 22°29′04″S 151°20′03″W  /  22.48444°S 151.33417°W  / -22.48444; -151.33417 ) 土布艾岛( 23°23′00″S 149°27′00″W  /  23.38333°S 149.45000°W  / -23.38333; -149.450

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