Question

我在一个方框内有一个段落。基本上我在css中使用border属性制作了这个盒子。现在我将图片设置为框的背景图像。现在，背景设置为整个框。我希望图片只能覆盖50％的图片（不删除图片的任何部分）。在剩下的50％的框中，我想写一些文字。那就是我到目前为止所做的：

<p id="p_box1">Text goes here Text goes here Text goes here <br/>
                        Text goes here Text goes here Text goes here<br/>


                        </p>

.CSS：

#p_box1{
    padding: 18px 2%;
    border: 3px solid Crimson;
    float: left;

    width: 20.333333%;

    margin: auto 2%; 

    margin-left:120px;

    border-radius:7px;
    -webkit-border-radius:7px;
    -moz-border-radius:7px; 
    -ms-border-radius:7px;
    -o-border-radius:7px;


    background:url("img_me/box_img_1.jpg") no-repeat;

Answer 1

复制此CSS：

#p_box1{
    padding: 18px 2%;
    border: 3px solid Crimson;
    float: left;

    width: 20.333333%;

    margin: auto 2%; 

    margin-left:120px;

    border-radius:7px;
    -webkit-border-radius:7px;
    -moz-border-radius:7px; 
    -ms-border-radius:7px;
    -o-border-radius:7px;


    background:url("img_me/box_img_1.jpg") no-repeat;
    background-size: 50% 100%;

background-size属性可以设置宽度（在您的情况下为50％）和高度（在您的情况下为100％）。所以，首先是宽度，然后是高度。

Answer 2

如果我正确理解您的问题，您可以使用background-size CSS属性（不兼容IE8），例如：background-size: 50%;

如何设置仅占50％的div框的背景图像？

2 个答案: