0 
<style type="text/css">
#star12 {
background: blue;
width: 80px;
height: 80px;
position: relative;
}
#star12:before, #star12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: blue;
}
#star12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#star12:after {
 -webkit-transform: rotate(60deg);
 -moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
</style>

<div id="star12" >
</div>

此代码为星型 div。它输出一个星形div。我想在这个明星 div 中显示一个图像。是否可以？请帮助我的朋友。我需要以各种格式在 div 中显示图像。

4

2 回答 2

0

我不确定这是什么原因造成的，但我认为transform文档上的 ed 元素也变得比它们的后代更高（z 索引变得更大）——这就是z-index图像本身的手册可以派上用场的地方。任意数字就足够了，我发现在这种情况下 10 有效；还要记住，为了使用z-index,position必须是relativeor absolute（而不是默认的static）。

因此，如果您想要该星内的图像，只需放置一个<img />元素并给它一个position:relative; z-index: 10.

HTML：

<div id="star12" >
    <img src="http://www.wallpixy.com/wp-content/uploads/boy-nature-animated-beatiful-samsung-galaxy-note-wallpapers.jpg" />
</div>

CSS：

#star12 img {
    width: 60px;
    height: 60px;
    position:relative;
    z-index: 100;
    margin-top: 10px;
    margin-left: 10px;
}

JS小提琴

于 2013-06-25T10:02:24.000 回答
0

只需添加一个<img />内部<div id="star12">

<div id="star12" >
    <img src="http://www.fastcocreate.com/multisite_files/cocreate/imagecache/slideshow-large/slideshow/2013/01/1682345-slide-slide-1-biz-stone-explains-how-he-turned-91-random-photos-into-a-movie.jpg" />
</div>

并将适当的 css 应用于 img，

img{
    width: 60px;
    height: 60px;    
    position: absolute;
    z-index: 100;
    top: 10px;
    left: 10px;        
}

测试链接

于 2013-06-25T10:03:25.837 回答