Question

以下是当前背景：

<html>
    <head>
        <title></title>
    </head>
    <body style="background: #5d5d5d url(images/tile_dark.png); 
                 border: 20px solid #00c09e; 
                 margin: 0; 
                 padding: 0;">
    </body>
</html>

我需要在绿色边框上显示另一张图片。我该怎么做？

Answer 1

更新：添加 DEMO in jsFIDDLE

您可以创建<div>之类的：

 <div id="another"></div>

背景图片位于边框顶部，并使用css不透明度使其透明。

示例CSS：

#another{
    position: absolute;
    background: url('path/to/image');
    background-size: cover;
    opacity: 0.5;
    left: 0;
    right: 0;
    top: 0;
    height: 40px;
}

Answer 2

您无法在该元素之外显示元素的背景。你可以尝试做一个

body::after{
   content:'';
   display:block;
   position:absolute;
   width:100%;
   height:100%;
   background:url(images/yourimage)
 };

对于同一元素上的多个图像，请用逗号分隔它们：

background: #color1 background:url(path-to-image1) 0px 0px no-repeat, #color2 background:url(path-to-image) 1px 1px repeat-x; /*and so on*/

您也无法使背景图像透明，只能使背景颜色。如果您需要背景图像是透明的，请更改元素的不透明度。对于透明背景颜色用户：

background:rgba(255,255,255,0.5); /*first 3 are color codes -RGB, last one is opacity from 0 to 1*/

Answer 3

在border-image上设置背景，试试CSS border-image。

编辑：

body {
    background: green;
}
#another{
    background: blue;
    width: 50%;
    border-image: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpaper-2-798x350.jpg) 30 30 round;
    border-width: 10px;
    margin: auto;
    height: 200px;
}

如何在HTML中将多个透明图像设置为背景？

3 个答案: