Question

所以我的网站内部有两个元素。我想要做的是在页面上有模糊效果并重叠我的文本，但只有外部。我希望文本仍然可以编辑，突出显示等等。目前我有两个类，一个是文本进入的主类，一个应该与主类重叠的覆盖类。

.main{
    top:50px;
    position:relative;
    width:75%;
    margin:auto;
    margin-top:50px;
    margin-bottom:50px;
    border-radius: 4px;
    padding: 0.1in;
    background-color: rgba(48, 48, 48, 0.75);
    box-shadow: 0px 0px 50px rgba(120, 120, 120, 0.50);
    z-index:0;
}

.overlay{
    opacity:0.8;
    filter: blur(0.1in);
    -webkit-filter: blur(0.1in);
    -moz-filter: blur(0.1in);
    -ms-filter: blur(0.1in);
    -o-filter: blur(0.1in);
    width:100%;
    height:100%;
    z-index:1;
}

JSfiddle Demo

Answer 1

这是一个适合您的解决方案：

记住要标记清楚显示的内容，作为.overlay的兄弟。

.main:hover .overlay{ /*filtering stuff*/}

Upadeted CodePen

http://codepen.io/anon/pen/GpQoqP

还好吗？

Answer 2

以下是您可以编辑文字的方法。

不要使用p标签。使用textarea并应用下面的一些CSS代码。

http://jsfiddle.net/xyphqvoo/2/

我用textarea替换了你的p标签代码。下面是可以编辑文本的CSS。

def post_params
   sponsor_params = [:id, :descriptive_text, :logo, :name, :website, :description]
   sponsor_params -= [:logo] if (action_name == "update") && !params[:post][:sponsor_attributes][:logo]

   params.require(:post).permit(:title, :content, sponsor_attributes: sponsor_params)
end

在那里，您可以获得第一段的可编辑文本。

注意：要调整textarea，请查看这篇很棒的文章。

https://css-tricks.com/textarea-tricks/

叠加模糊效果但仍然可以突出显示文本

2 个答案: