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

Question

Live 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设置为“slider-and-logo-holder”）。

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

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

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