ライブ JSFiddle
質問
以下で、私が何をしようとしているのかがすぐにわかるでしょう。同じ背景画像を持つ 2 つの要素を配置し、1 つをフィルター処理し、その上にフィルター処理されていないバージョンを配置しました。これらの画像が位置合わせされていないという問題を解決するにはどうすればよいですか? オフセットしてみました。私は絶対配置を試みましたが、それはオーバーフロー隠しを止めます。
可能な、厄介な解決策
私が見る唯一の解決策は、内側の画像が揃うまで別のバージョンを試して使用することです。どちらでも構いません。数時間で適切に配置されたバージョンを確実に取得できますが、背景の画像を変更したい場合はどうすればよいでしょうか? これには 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;
}