1

到目前为止，这是我们正在努力完成的事情，但无济于事。

  1. 身体背景必须有一些纹理。

  2. 在中间图像内，背景应该是白色的。

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

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

4

2 回答 2

0

类似这样的东西：

<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));
}
于 2013-07-18T11:52:47.237 回答
-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-18T11:48:23.050 回答