Question

我有一个盒子，它是一个图像，我在图像中有文字，将动态生成。

请查看随附的屏幕截图以获取更多信息。

如果有更多文字，我如何确保图像延伸？

enter image description here

.my-community-box{
        background: url('/assets/my-community-box.png') no-repeat !important;
        background-size: 100%;
        width: 287px;
        min-height: 474px;
        float: right;

        .my-community-details{
            background-color: @mild-gray;
            margin: 20px 10px 10px 10px;
            padding: 5px;

            ul{
                width: 250px;
                margin: 0 0 9px 0;
                li{

                }
            }

            a{
                color: @darker-green;
            }

            a:hover{
                text-decoration: none;
                color: @light-green;
            }
        }

Answer 1

您需要background-repeat: repeat-y;图像，但必须更改它。就目前而言，它只是一张图片 - 您必须将其裁剪为具有顶部边框，并且图像的“正文”将是您想要垂直重复的部分。

或者，由于设计简单，您可以使用css borders

EDIT 另外，正如一些评论建议的那样，你应该向我们展示一些代码，而不仅仅是一张图片，这对我们有很大帮助！

Answer 2

为什么不使用边框？

.my-community-box{
        background: #F3F3F2;
        width: 287px;
        min-height: 474px;
        float: right;
        border: 3px solid #C5C3C3;
}

.my-community-box-wrap{
        border-left: 2px solid #C2E2A0;
        border-right: 2px solid #C2E2A0;
        float: right;
}

演示：http://jsfiddle.net/AWXHr/

Answer 3

使用css border而不是image

  div{
    border:#333 solid 6px; border-radius:0 0 6px 6px; 
    box-shadow: 0px 0px 0px 2pt green;   
    height:auto;
    width:200px;
    background:#c1c1c1
}

演示http://jsfiddle.net/wYUFD/12/

Answer 4

的 Demo 的

您好已经习惯了background-size:cover;或max-width

就像这样

p{ max-width:200px; border:solid 10px red; background:url('http://www.gravatar.com/avatar/eb71f65106648cf6618b10423e8b0451?s=32&d=identicon&r=PG') no-repeat; background-size:cover; color:#fff; }

Demo

Answer 5

我希望这可能对你有所帮助

.my-community-details{
        background-color: @mild-gray;
        margin: 20px 10px 10px 10px;
        padding: 5px;
        max-width: //set what depends up on your image width
        max-height: //set what depends up on your image height
        overflow-y: auto;

文本应始终位于图像框内

5 个答案: