流利的设计系统CSS-改进
[英]Fluent Design System CSS - improvement
问题描述
I found this Post CSS-only Acrylic Material from Fluent Design System which is great but it has a big problem. 
我从Fluent Design System中找到了这种仅CSS后的丙烯酸材料 ，虽然很好，但存在很大的问题。 When I try to use more then one background image it doesn´t work anymore, because the following piece of code is needed: 当我尝试使用多个background image它将不再起作用，因为需要以下代码：
body, .acrylic::before {
background: url("img1.jpg") center/cover;
background-attachment: fixed;
}
But I want to use different background-images for page sections: 但是我想对页面部分使用不同的背景图像：
body {
background: #FFF;
}
.hero {
background-image: url(img1.jpg);
}
.about {
background-image: url(img2.jpg);
}
I need to be able to use Acrylic material effect anywhere on the page, like this: 我需要能够在页面上的任何地方使用丙烯酸材料效果，如下所示：
<body>
<div class="hero">
<h1>I´m a hero</h1>
<a href="#section">Scroll down link</a>
</div>
<div id=section class="about"><p>Section has different background image <span class="acrylic">but this content is on the Acrylic Fluent Design surface<span/></p><div/>
</body>
So I need Acrylic surface as a universal design component without the limitations of the original post. 因此，我需要丙烯酸表面作为通用设计组件，而不受原始帖子的限制。 If somebody knows how to do it I will really appreciate any help. 如果有人知道该怎么做，我将不胜感激。 Thank you (And sorry for my bad writing - I´m not a native speaker so I hope you understand everything I wrote :)) 谢谢（对不起，我的写作不好-我不是母语人士，希望您能理解我写的所有内容：））
2 个解决方案
解决方案1
1 已采纳 2017-11-04 18:46:08
The original answer to the question you link to states that: 您链接到的问题的原始答案指出：
Since we use same background for parent and children, we can club them together ;)
However this is not the case for your scenario, you actually want each element to have its own background, right? 但是，对于您的情况并非如此，您实际上希望每个元素都有其自己的背景，对吗？ If I'm understanding you correctly, then you can remove this part of you css: 如果我对您的理解正确，则可以删除CSS的以下部分：
body, .acrylic::before {
background: url("img1.jpg") center/cover;
background-attachment: fixed;
}
Then to set the background for each section, plus the section's .acrylic background separately, see below: 然后为每个部分设置背景，再加上该部分的.acrylic背景，请参见下文：
main { display: flex; align-items: center; justify-content: center; height: 100vh; width: 50%; float: left; } .acrylic { padding: 4em 6em; position: relative; overflow: hidden; } .acrylic::before { filter: blur(10px); content: ""; position: absolute; left: -10px; top: -10px; width: calc(100% + 20px); height: calc(100% + 20px); z-index: -1; } .acrylic::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; opacity: 0.35; border: 1px solid #fff; background: #fff; background-image: url(data:image/png;base64,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); } .shadow { border-radius: 1px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.2); } /* From here down are the changes to the original answer */ .hero, .about { position: relative; z-index: -1; } .hero, .hero .acrylic::before { background: url("https://images.unsplash.com/photo-1427434991195-f42379e2139d?auto=format&fit=crop&w=1189&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D") center/cover; } .about, .about .acrylic::before { background: url("https://images.unsplash.com/photo-1452723312111-3a7d0db0e024?w=700") center/cover; }
<main class="hero"> <div class="acrylic shadow"> Acrylic material! </div> </main> <main class="about"> <div class="acrylic shadow"> Acrylic material! </div> </main>
解决方案2
0 2017-11-04 18:13:11
Could you try this, maybe it works: 您可以尝试一下，也许可以用：
hero, .acrylic::before {
background: url("img1.jpg") center/cover;
background-attachment: fixed;
}
about, .acrylic::before {
background: url("img2.jpg") center/cover;
background-attachment: fixed;
}
is it maybe possible that you provide a Screenshot how you wanna have it? 您是否有可能提供想要的屏幕截图？ :) :)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.