Question

<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中显示图像。

Answer 1

我不确定导致这种情况的是什么，但我认为transform ed元素在文档上变得更高（z索引变得更大），而后者也是如此 - 是手册z-index可以为图像本身派上用场的地方。任意数字应该足够了，我发现在这种情况下有10个工作;另请注意，要使用z-index，position必须为relative或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 fiddle

Answer 2

只需在<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;        
}

Test Link

星级div内的图像

2 个答案: