使用 CSS 处理 h2/h3 背景区域的毛玻璃效果

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

我刚刚搜索了“磨砂玻璃效果”，第二个结果看起来很有希望：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 通道的背景颜色应用于图像上方的“磨砂”容器，例如：

.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);


}