javascript - 过滤后未过滤 - 使用两个元素在过滤后的图像内创建未过滤区域

Question

现场 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;
}

Answer 1

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

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

Answer 2

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

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

在这个小提琴中，我已经做到了（以及设置position:relative为“滑块和徽标支架”）。

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

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

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