h2/h3の背景領域にCSSを使用した曇りガラス効果

Question

私は現在、イベントサイトと、各イベントを表すインデックスページのスタイリングを行っています。イメージの上にイベントのタイトルとイベントの日付が表示されています。私は現在、これらをh2/h3の括弧で示しています。単色の背景を持つ白いテキストです。 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; 


    } 

は、ここに私の現在のビューのRails/htmlコードとCSSスタイリングです

私はこのような画像を少し想像しています（申し訳ありませんが、最高のスクリーンショットではありません）。

Answer 1

私はグロスグロス効果がグロスグーグルであり、2番目の結果は有望視されました：https://css-tricks.com/frosting-glass-css-filters/。コードページにリンクします：http://codepen.io/adobe/pen/40cd4258f2d72a60f37a5e2f47124b7e

ぼやけた画像にはぼやけた画像が使用されます。サポートする必要のあるブラウザによっては、代わりにCSSプロパティfilterを使用することができます。そうすれば、エフェクトを適用する画像をロードするだけで、適用されたエフェクトを使用して1秒間に移動する必要はありません。
私はあなたのためのフィドルを作っ：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; 
} 

 

---

ぼかし効果を参照してください。あなたがそれを必要としないのであれば、あなただけのように、画像の上に「つや消し」コンテナにアルファチャンネルを持つ背景色を適用することができます。私が言うことができるものから、

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

Answer 2

の一部のみこれはあなたが援助を必要とするあなたの固体の背景色を曇ったガラスのように見せることです。これは幾分主観的な基準ですが、あなたが提供したイメージに基づいて、実際に行う必要があるのは、背景色を半透明にすることだけです。それを行うための方法は、あなたの色のRGB値を取得し、そのようにそれを渡すために、次のようになります。すべての応答のための

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


}