我在一个盒子里有一个段落。基本上我通过在 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;
最佳答案
复制这个 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%)。所以,首先是宽度,然后是高度。
关于html - 如何设置仅覆盖其 50% 的 div 框的背景图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26549064/