Question

我目前正在设计一个事件网站和索引页面 - 代表每个事件我有一个图像，事件标题和事件日期位于图像的顶部。我目前在h2 / h3括号中使用这些，纯白色文本和纯色背景。我想使用CSS将背景更改为“磨砂玻璃”效果。我该怎么做？

这是我当前的视图Rails / html代码和CSS样式 -

index.html.erb - 活动

<div class="container">
<div class="row">
    <div class="col-md-12">
        <ul>

                <% @events.each do |event| %>
            <li class="events"> 
                    <%= link_to (image_tag event.image.url), event, id: "image" %>
                <div class="text">  
                    <h2><%= link_to event.title, event %></h2>
                    <h3><%= link_to event.date.strftime('%A, %d %b %Y'), event %></h3>
            </li>       
                <% end %>
                </div>

        </ul>                           
    </div>
</div>

events.css.scss -

li.events { 
width: 350px; 
height: 350px; 
float: left;
margin: 20px;
list-style-type: none;
position: relative; 

 }

 li.events img { 
width: 100%; 
height: 100%; 
border-radius: 25px;



 }

div.text  { 

background: transparent; 
padding: 25px; 
position: absolute; 
bottom: 15px;
left: 25px; 

}

div.text a {
text-decoration: none;
color: #FFFFFF;
padding: 5px;   
text-align: center;
border-radius: 15px;
background-color: #FF69B4;


     }

我认为图像看起来有点像这样（不是最好的截图 - 对不起）。

Answer 1

据我所知，您需要帮助的唯一部分是使您的纯色背景颜色看起来像磨砂玻璃。这是一个有点主观的标准，但根据您提供的图像，您真正需要做的就是使背景颜色半透明。这样做的方法是获取颜色的rgb值，并将其传递给它：

background-color: rgba( 255, 255, 255, 0.5 );

Answer 2

我只是用Google搜索＆＃34;磨砂玻璃效果＆＃34;第二个结果看起来很有希望：https://css-tricks.com/frosting-glass-css-filters/。它链接到codepen：http://codepen.io/adobe/pen/40cd4258f2d72a60f37a5e2f47124b7e

他们使用模糊图像来模糊效果。根据您需要支持的浏览器，您可以使用CSS属性filter。这样，您只需要加载要应用效果的图像，而不是加载应用效果的图像我为你做了一个小提琴： https://jsfiddle.net/hwvpch0u/1/

基本上，它主要涉及以下 CSS ：

.mycontainer {
    background-image: url('<my-image>');
    background-size: cover;
}
.mycontainer .glass {
    /* all the properties for the "stand out" container */
}
.mycontainer .glass::before {
    /*background-image: url('<my-blurry-image');*/ /* see: http://caniuse.com/#search=filter */
    background-image: url('<my-iamge>');
    -webkit-filter: blur(8px); /* blur only of original image is used instead of blurry */
    filter: blur(8px); /* blur only of original image is used instead of blurry */
    background-size: cover;
    opacity: 0.4;
}

在您额外添加的屏幕截图中，我看不到模糊效果。因此，如果您不需要，可以将具有Alpha通道的背景颜色应用于＆＃34; frosted＆＃34;图像上方的容器，如：

.mycontainer .glass {
    background-color: rgba(255, 255, 255, 0.5);
}

Answer 3

非常感谢所有回复 - 我在这里找到了解决方案 -

div.text a {
text-decoration: none;
color: #FF69b4;
font-weight: bolder;
padding: 5px;   
text-align: center;
border-radius: 15px;
background-color: rgba(255,255,255,.6);
-webkit-backdrop-filter: invert(10px);


}

使用CSS对h2 / h3背景区域的磨砂玻璃效果

3 个答案: