Question

到目前为止，这是我们试图取得的成就。

身体背景必须有一些纹理。
在中间图像中，背景应为白色。
由于红色部分应该填满形状，因此中心图像应该具有透明背景。

我不是在询问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/

Answer 1

有些事情如下：

<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完成民主代码：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));
}

Answer 2

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

使用CSS和Javascript预加载效果 - 是否可以将此css拉下来？

2 个答案: