如何使用CSS和圖像在HTML頁面中創建圓形標題部分？

Question

那是滿嘴的...

因此，我堅持使用來自Marketing的圖像，該圖像具有一些人的照片，左上角和右上角是圓角的，並且從底部到頂部具有漸變過渡（深藍色到較淺的陰影）。

因此，我要做的是裁剪左（180px x 10px）和右（180px x 10px）圓角，並制作出單獨的圖像，然后裁剪僅包含漸變藍色（180px x 10px）的另一幅圖像），剩下的就是其中包含人物的圖片（180px x 461px）。 所以知道我總共有4張圖片。

最后，問題是：

如何布置填充器div，以便在調整瀏覽器大小時擴展和收縮（填充左圓角和人物圖像之間的空間？

謝謝斯蒂芬

<style>
#left {
    height:180px;
    background-size: 100%;
    background-size: cover;
    background-position: center center;
    vertical-align: top;
    width: 10px;
    background-image: url("@Url.Content("~/Content/images/login/left.png")");
}  

#filler {
    height:180px;
    background-size: 100%;
    background-size: cover;
    background-position: center center;
    vertical-align: top;
    width: 50px;
    background-image: url("@Url.Content("~/Content/images/login/filler.png")");
}  
#image {
    height:180px;
    background-size: 100%;
    background-size: cover;
    background-position: center center;
    vertical-align: top;
    width: 461px;
    background-image: url("@Url.Content("~/Content/images/login/image.png")");
}  
#right {
    height:180px;
    background-size: 100%;
    background-size: cover;
    background-position: center center;
    vertical-align: top;
    width: 10px;
    background-image: url("@Url.Content("~/Content/images/login/right.png")");
}  

</style>


<div class="row-fluid">
    <div id="left" class="pull-left"></div>    
    <div id="filler" class="pull-left"></div>
    <div id="right" class="pull-right"></div>
    <div id="image" class="pull-right"></div>   
</div>

Answer 1

<div class="row-fluid">
    <img src="http://mydomain.com/pic.jpg" />  
</div>

.row-fluid{
background: #fff;
}

.row-fluid img{
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
}

這是演示： http : //jsfiddle.net/Ashkanvb/rsPp2/

Answer 2

我同意邊界半徑的答案。 但是，如果事實證明（出於某種原因） 您必須使用圖像，那么這里有一個帶有一些經過調整的HTML和CSS的解決方案：

http://jsbin.com/AwUWabI/7/edit