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

Question

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

这是我当前的 View 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>  

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