使用CSS和Javascript預加載效果 - 是否有可能將此css關閉？

以下是我們正在嘗試完成但迄今無濟於事。使用CSS和Javascript預加載效果 - 是否有可能將此css關閉？

身體背景必須有一些紋理。
在中間的圖像裏，背景應該是白色的。
由於紅色部分應該填滿形狀，中心圖像應該有一個透明背景。

我不問的JavaScript填補一部分。我只是想知道我們是否可以完成它的CSS部分。

任何線索？

這裏有一個例子：

HTML：

<body> 
    <div> 
     <hr/> 
     <div class="ornament"></div> 
    </div> 
</body>

CSS：

body { 
margin-top: 100px; 
background: url('http://hostmypicture.com/images/fundokairo.png') repeat; 
} 

hr { 
    height: 2px; 
    color: #578daf; 
    background-color: #578daf; 
    border: 0; 
    padding: 0; 
    margin: 9px 0 0 0; 
} 

.ornament { 
    width: 169px; 
    height: 169px; 
    background: url('http://s23.postimg.org/mtc0673xj/mascara_Kairos.png') 0 50%; 
    margin: -84px auto 0 auto; 
}

http://jsfiddle.net/9EFdF/

來源

2013-07-18 MEM

怎麼樣的HTML？ –

小提琴在哪裏 – 2013-07-18 11:28:28

這裏是： http://jsfiddle.net/9EFdF/20/ – MEM

-1

所以基本上這只是3的div。沿此線

<div style="position:relative;background-color:white;width:200px;height:200px"> 
    <div style="background-color:red;height:100px;width:200px;bottom:0;position:absolute;z-index:10"></div> 
    <div style="position:absolute;background-image:shape.png;width:200px;height:200px;z-index:20"></div> 
</div>

來源

2013-07-18 11:48:23 Krab

這是什麼？它是如何工作的？什麼是shape.png？ –

@JohanBouveng：所以如果我不明白某人寫了什麼，我應該downvote？嗯有趣。 – Krab

我不認爲「這只是3個div」和HTML不作爲一個有用的答案在小提琴工作。我沒有投過什麼。 –

東西：

<div style="position:relative;margin:0 auto;display:block;width:150px;height:150px;overflow:hidden;"> 
<div style="position:absolute;top:0px;left:0px;border-radius:50px;background-color:red;width:150px;height:150px;"> 
<div style="position:absolute;top:0px;left:0px;" id="grainybackground"><img src="mygrainybackground.png"></div> 
<div style="position:absolute;top:0px;left:0px;"><img src="my_transparant_great_looking borderimage.png" width="150" height="150"> 

</div>

然後是JavaScript的：

document.getElementById("grainybackground").style.top = "-1px";

上的jsfiddle完成democode：http://jsfiddle.net/tLJgC/：

<div style="position:relative;margin:0 auto;display:block;width:156px;height:156px;overflow:hidden;"> 
<div style="position:absolute;top:3px;left:3px;border-radius:50%;background-color:red;width:150px;height:150px;"> 
    <div style="position:absolute;top:0px;left:0px;background-color:grey;width:150px;height:150px;" id="grainybackground"><img src="mygrainybackground.png"></div> 
<div style="position:absolute;top:0px;left:0px;border:3px solid black;border-radius:50%;width:147px;height:147px;"><!-- ingnore the border, didn't bother looking for aninside transparent bottlecap background image --><img src="my_transparant_great_looking borderimage.png" width="150" height="150"> 

</div>

和JavaScript

for(c=0;c<150;c++) 
{ 
    window.setTimeout("document.getElementById('grainybackground').style.top=-(0+"+c+")+'px';console.log(0-c)",(100*c)); 
}

第二的jsfiddle與更新的信息

http://jsfiddle.net/tLJgC/2/

<body background="http://hostmypicture.com/images/fundokairo.png"> 
<div style="position:relative;margin:0 auto;display:block;width:156px;height:156px;overflow:hidden"> 

<div style="position:absolute;top:3px;left:3px;border-radius:50%;background-color:red;width:150px;height:150px;"> 

    <div style="position:absolute;top:3px;left:3px;width:150px;height:150px;background-image:url('http://hostmypicture.com/images/fundokairo.png');" id="grainybackground"></div> 

<div style="position:absolute;top:0px;left:0px;width:150px;height:150px;"><img src="http://s23.postimg.org/mtc0673xj/mascara_Kairos.png" width="150" height="150"> 

</div>

和JavaScript

for(c=0;c<150;c++) 
{ 
    window.setTimeout("document.getElementById('grainybackground').style.top=-(0+"+c+")+'px';document.getElementById('grainybackground').style.backgroundPosition = '"+c+"px "+c+"px'",(100*c)); 
}

來源

2013-07-18 11:52:47 Tschallacka

我不關心js部分。只有CSS。你可以看看這裏嘗試。 http://jsfiddle.net/j4eH8/4/ - 似乎我需要一個額外的白色圖像的地方。請注意，我們有應該看到的背景，所以我相信灰色條不起作用。 – MEM

檢查此更新與你的圖像提琴。這是你想要的嗎？ http://jsfiddle.net/tLJgC/2/ – Tschallacka

是的。幾乎。但它眨了眨眼睛。它應該閃爍。而且裏面應該有白色，不透明。如果我們改變這個蒙版效果並嘗試畫布或其他東西，並考慮填充效果會更好。目前，設計師必須改變設計。 :( – MEM

使用CSS和Javascript預加載效果 - 是否有可能將此css關閉？

回答

相關問題