使用CSS和Javascript预加载效果-有可能实现此CSS吗？_Css

使用CSS和Javascript预加载效果-有可能实现此CSS吗？

css

使用CSS和Javascript预加载效果-有可能实现此CSS吗？,css,Css,以下是我们正在努力实现的目标，但到目前为止没有任何效果身体背景必须有一些纹理在中间的图像中，背景应该是白色的由于红色部分应该向上填充形状，因此中心图像应该具有透明背景我不是在问javascript填充部分。我只是想知道我们是否可以完成它的css部分有什么线索吗以下是一个示例： html: 所以基本上只有3个div <div style="position:relative;background-color:white;width:200px;height:200px">

以下是我们正在努力实现的目标，但到目前为止没有任何效果

身体背景必须有一些纹理

在中间的图像中，背景应该是白色的

由于红色部分应该向上填充形状，因此中心图像应该具有透明背景

我不是在问javascript填充部分。我只是想知道我们是否可以完成它的css部分

有什么线索吗

以下是一个示例：

html:

所以基本上只有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>

大致如下：

<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>

在JSFIDLE:上完成演示代码：

和javascript

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

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));
}

for（c=0；c@JohanBouveng所以，如果我不明白某人写的是什么，我应该投下赞成票。嗯，有趣。我不会考虑“这只是3分钱”。HTML不是一个有用的答案。我没有投票。我不关心js部分。只有css。你能看看这里的尝试吗。-似乎我需要一个额外的白色图像。注意，我们有应该看到的背景，所以我相信灰色条不起作用。请用你的ima检查这个更新的小提琴ges。这就是你想要的？是的。差不多。但它会闪烁。它应该闪烁。你的内部应该是白色，而不是透明的。如果我们更改此遮罩效果，尝试画布或其他方式，并考虑填充效果，效果会更好。现在，设计师必须更改设计：（好吧，这就是你将获得的所有帮助。这不是为你的网站编写代码。你首先要问的问题是如何实现这一点，很简单，三个绝对div和一个透明div。以下是：
document.getElementById("grainybackground").style.top = "-1px";

<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>

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

<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>

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));
}