Question

请帮助解决问题有一张图片，有必要将它的顶部部分模糊为绿色背景。应该出现so的结果我试图解决这个问题，使用photoshop过滤器“高斯模糊”来源的绿色背景。刚尝试应用css-property“filter”。由于没有解决问题（有绿色玻璃混叠，但有一个模糊）。这里jsfiddle

的CSS：

.sk_a1 .sk_meta1{
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: -10px;
    border-top: 7px solid #3c5f4f;
    background: #3c5f4f;
    opacity: 0.95;
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    -o-filter: blur(2px);
    filter: blur(2px);
}

Answer 1

您也可以将图像作为背景再次放置，并在前面设置一个小容器。我认为这是你实际打算做的事情： http://jsfiddle.net/fr4wh935/9/

.sk_meta1 {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -ms-filter: blur(2px);
  -o-filter: blur(2px);
   filter: blur(2px);
   background-image: url(http://static5.smi2.net/img/300x300/2257778.jpeg);
   background-position:  bottom left;
 ...

及其伪元素:before

.sk_meta1:before {
    height: 100%;
    width: 100%;
    opacity: 0.3;
    content : ''; 
    background-color: green;
    position: absolute;
}

Answer 2

您可以使用Css blur和CSS clip-path（查看我在.blur课程中的代码。）

“技巧”是创建一个位于原始图像顶部的新图像（将被模糊和遮罩的部分）。

这里有一个简单的示例（仅限HTML和CSS）。

http://jsfiddle.net/fr4wh935/6/

请注意，所有浏览器可能都不支持CSS模糊和剪辑路径，并且您需要在代码中添加新的图片代码。

或者你可以考虑用Photoshop创建模糊效果，用你想要的效果替换你的图像文件，这在任何浏览器上都会很明显。

为了支持旧版本的Firefox，你应该

到目前为止，模糊效果适用于Chrome，Safari（移动和桌面）以及Firefox 35+。为了获得对早期版本Firefox的支持，我们需要应用SVG过滤器：

创建一个文件并将其另存为blur.svg，使用以下代码：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="blur"> <feGaussianBlur stdDeviation="3" /> </filter> </svg>

CSS需要更改以指向svg文件：

.blur {  filter: url(blur.svg#blur); -webkit-filter: blur(5px); filter: blur(5px); }

.blur{
      filter: blur(5px);
  -webkit-filter: blur(5px);
    position: absolute;
  clip: rect(200px, 300px, 300px, 0px);
}   

.sk_wrap{
            overflow: hidden;
            width: 960px;
        }

            .sk_item{
                width: 300px;
                height: 300px;
                overflow: hidden;
                float: left;
                margin: 10px;
            }

                .sk_a1{
                    display: block;
                    position: relative;
                    width: 100%;
                    height: 300px;
                }

                    .sk_a1 img{
                        display: block;
                        width: 100%;
                        min-height: 100%;

                    }

                    .sk_a1 .sk_meta1_outer{
                        width: 105%;
                        height: 105px;
                        position: absolute;
                        bottom: -2px;
                        left: -2px;
                        right: -2px;
                        overflow: hidden;
                    }

                        .sk_a1 .sk_meta1{
                            width: 100%;
                            height: 100px;
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            right: -10px;
                            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFRDEyM0YwQ0I2NzNFNDExOTc1NkRDNUE1RkFFNDQxMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCQUM4NDFDMkIyQzExMUU0QkYwN0JBNTlENUEzMDdDNyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCQUM4NDFDMUIyQzExMUU0QkYwN0JBNTlENUEzMDdDNyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkMyNDI0Nzk1QkFCMkU0MTE4NUE3ODY1MDA0QjAyMENFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkVEMTIzRjBDQjY3M0U0MTE5NzU2REM1QTVGQUU0NDExIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+SxsKbQAAABlJREFUeNpiVA5z2MyABzAxEADDQwFAgAEAfFwBfK3jOH0AAAAASUVORK5CYII=) left top repeat;



                            border-top: 7px solid #3c5f4f;
                            /*background: #3c5f4f;
*/                          opacity: 0.95;
                            -webkit-filter: blur(2px);
                            -moz-filter: blur(2px);
                            -ms-filter: blur(2px);
                            -o-filter: blur(2px);
                            filter: blur(2px);
                            /*margin: 0 -5px -5px;*/
                        }   

                    .sk_a1 .sk_meta2{
                        width: 260px;
                        height: 60px;
                        position: absolute;
                        bottom: 5px;
                        left: 0;
                        right: 0;
                        padding: 15px 20px 20px;
                        overflow: hidden;

                        font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                        color: #fff;
                        text-align: center;
                    }   

                        .sk_a1 .sk_title1{
                            font-size: 25px;

                            overflow: hidden;
                            margin-bottom: 5px;
                            display: block;
                        }   

                        .sk_a1 .sk_announce{
                            font-size: 15px;
                            overflow: hidden;

                            display: block;
                        }  

<div class="sk_wrap">
    <div class="sk_item">
        <a class="sk_a1" href="http://" id="674190">
            <img  class="blur" alt=
        "Роботы Роботы Роботы Роботы Роботы Роботы" src=
        "http://static5.smi2.net/img/300x300/2257778.jpeg">
            <img class="" alt=
        "Роботы Роботы Роботы Роботы Роботы Роботы" src=
        "http://static5.smi2.net/img/300x300/2257778.jpeg">

        <div class="sk_meta1_outer">
            <div class="sk_meta1"></div>
        </div>

        <div class="sk_meta2">
            <div class="sk_title1">
                Роботы Роботы Р
            </div>

            <div class="sk_announce">
                Роботы Роботы Роботы Роботы
            </div>
        </div></a>
    </div>
</div>

施加模糊图像

2 个答案: