CSS - 在图像上创建一个圆圈开始

我现在有这个权利：

enter image description here

的图像有width 120px和橙色圆圈在一个单独的DIV放置空间。

<div> 
    <img src="../IMG_PATH/{{$local[$i]['image']}}" 
     width="120" class="img_doctor"> 
</div> 
<div class="order"> 
    {{ intval($i+1) }} 
</div>

这是我order类：

.order { 
    width: 27px; 
    height: 27px; 
    border-radius: 50%; 
    line-height: 26px; 
    text-align: center; 
    background: #FF8242; 
    color: white; 
    position: absolute; 
    margin: -159px 8px; 
    font-size: 12px; 
    font-weight: bold; 
    font-family: Roboto-Regular; 
}

所以，我只需要以使图像前的圆圈，放在角落里，这样的事情：

enter image description here

来源

2015-04-05 Jhonatan Sandoval

使图像成为<div>并将该数字当成小孩：

document.getElementById("changeheight").onkeyup = function(e) { 
 
    document.getElementsByClassName('image')[0].style.height = this.value + 'px'; 
 
} 
 

 
document.getElementById("changewidth").onkeyup = function(e) { 
 
    document.getElementsByClassName('image')[0].style.width = this.value + 'px'; 
 
}

.image { 
 
    background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg); 
 
    width: 100px; 
 
    height: 40px; 
 
    border-radius: 5px; 
 
} 
 
.image > span { 
 
    width: 20px; 
 
    height: 20px; 
 
    text-align: center; 
 
    line-height: 20px; 
 
    background-color: orange; 
 
    color: white; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}

<div class="image"> 
 
    <span>1</span> 
 
</div> 
 

 
<span>Set height to: </span> 
 
<input id="changeheight"><br/> 
 

 
<span>Set width to: </span> 
 
<input id="changewidth">

忽略JavaScript和自动调用setHeight/setwidth东西。我猜你会自己填充这个，所以这只是CSS。

来源

2015-04-05 18:24:25 Downgoat

太谢谢你了。 – 2015-04-05 18:46:06

@JhonatanSandoval没问题:) – Downgoat 2015-04-05 18:50:01

试试这个：

<html> 
<head> 

    <style type="text/css"> 
    .order-wrapper { 
    position: relative; 
    } 
    .order { 
     width: 27px; 
     height: 27px; 
     border-radius: 50%; 
     line-height: 26px; 
     text-align: center; 
     background: #FF8242; 
     color: #fff; 
     top: 10px; 
     left: 10px; 
     position: absolute; 
     font-size: 12px; 
     font-weight: bold; 
     font-family: Roboto-Regular; 
    } 
    </style> 

</head> 

<body> 


<div class="order-wrapper"> 
    <div class="order"> 
    {{ intval($i+1) }} 
    </div> 
    <img src="../IMG_PATH/{{$local[$i]['image']}}" width="120" class="img_doctor"> 
</div> 

</body> 
</html>

来源

2015-04-05 18:24:27 Shimakuro

CSS - 在图像上创建一个圆圈开始

回答

相关问题