html - 如何设置仅覆盖其 50% 的 div 框的背景图像？

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%)。所以，首先是宽度，然后是高度。