0

那是一口....

所以，我被市场营销中的一张图片卡住了，这张图片有一些人的照片，它的左上角和右上角是圆形的，并且它有一个从底部到顶部的渐变过渡（深蓝色到较浅的阴影）。

所以我所做的是裁剪左（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>
4

2 回答 2

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/

于 2013-11-12T00:21:43.520 回答
0

我同意边界半径的答案。但是，如果事实证明（无论出于何种原因）您必须使用图像，那么这里有一个带有一些调整的 HTML 和 CSS 的解决方案：

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

于 2013-11-12T00:37:10.530 回答