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 - 在圖像上創建一個圓圈開始

回答

相關問題