过滤后未过滤 - 使用两个元素在过滤后的图像中创建未过滤区域答案

【问题标题】：Unfiltered inside of filtered - Using two elements to create an unfiltered area within the filtered image过滤后未过滤 - 使用两个元素在过滤后的图像中创建未过滤区域
【发布时间】：2013-11-08 21:39:59
【问题描述】：

实时 JSFiddle

http://jsfiddle.net/TXMCv/5/

问题

您将在下面很快看到我正在尝试做什么。我已经定位了两个具有相同背景图像的元素，过滤了一个，并在其上放置了一个未过滤的版本。 如何解决这些图像未对齐的问题？我尝试过偏移。我试过绝对定位，但这会阻止溢出隐藏。

可能的混乱解决方案

我看到的唯一解决方案是尝试使用不同版本的内部图像，直到它对齐为止。这很好，在几个小时内我肯定会得到一个正确对齐的版本，但是如果我想在背景中更改图像怎么办？这需要 CSS 修复！

注意

仅在 Chrome 中测试

图片示例

CSS

@import url(http://fonts.googleapis.com/css?family=Telex);


.slider-and-logo-holder
{
width:100%;
height:465px;
font-family: 'Telex', sans-serif;
}

.header-slide-image
{
left:0px;
width:100%;
height:390px;
background-image:url('images/mys3_slider.jpg');
background-position:0px;
transition:background-position 5s;
padding-top:70px;
}

.logo-wrap
{
margin-left:auto;
margin-right:auto;
width:790px;;
height:425px;
}

.logo-left
{
float:left;
}

.logo-right
{
float:left;
-webkit-transform:rotateZ(90deg);
font-size:130px;
margin-left:-50px;
line-height:330px
}

.title-box
{
width:580px;
height:270px;
border-style:solid;
border-width:17px;
color:#4c4c4c;
margin-top:100px;
}

.title-left
{
font-size:120px;
width:190px;
line-height:190px;
margin-left:10px;
overflow:hidden;
color:#fbfbfb;
float:left;

}

.title-right
{
font-size:340px;
margin-top:-410px;
width:50%;
color:#664da6;
float:left;
}

.blur
{
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-ms-filter: sepia(100%);
-o-filter: sepia(100%);
filter: sepia(100%);
}

.clip
{
overflow:hidden;
}

.abso1
{
position:absolute;
z-index:-1;
}

【问题讨论】：

标签： javascript jquery html css filter

【解决方案1】：

background-attachment: fixed; 完成您的目标。然后背景图像不再定向在元素上，而是在视口上。

我更新了你的小提琴：http://jsfiddle.net/TXMCv/9/

【讨论】：

【解决方案2】：

我相信最好的方法是使用绝对定位。

因此，使用您的徽标包装并将其绝对定位，然后使用左右微调位置。

在这个小提琴中我已经做到了（以及将position:relative 设置为“slider-and-logo-holder”）。

.logo-wrap {
    width:790px;
    height:425px;
    position:absolute;
    left:-17px;
    top:-113px;
}

请注意，您可能想要制作一个新的“内部图像”，因为为了对齐它，我必须让主徽标稍微离开屏幕，但这种方法至少可以让您朝着正确的方向前进。

http://jsfiddle.net/TXMCv/8/

【讨论】：