Question

是否可以在某个元素中显示背景图像而不是？ -

示例 - 如果我在div中有3个div，其背景图像全部位于具有背景图像的<body>标记内。有没有办法在中心div中显示<body>背景图像（BodyBackground.jpg）而不是<div>背景图像（DivBackground.jpg）？

<body style="background-image:url('/Content/Images/BodyBackground.jpg'); background-repeat:repeat-y;">
   <div style="background-image:url('/Content/Images/DivBackground.jpg')">
      <div style="height:100px;width:200px"></div>
      <div style="height:100px;width:200px"> SHOW BodyBackground.jpg IMAGE HERE </div>
      <div style="height:100px;width:200px"></div>
   </div>
</body>

Answer 1

试试这个

 <body style="background-image:url('/Content/Images/BodyBackground.jpg'); background-repeat:repeat-y;">
   <div style="background-image:url('/Content/Images/DivBackground.jpg')">
      <div style="height:100px;width:200px"></div>
      <div style="height:100px;width:200px;background-image:url('/Content/Images/BodyBackground.jpg')!important;"> SHOW BodyBackground.jpg IMAGE HERE </div>
      <div style="height:100px;width:200px"></div>
   </div>
</body>

Answer 2

您可以创建一个定义背景图像的CSS类。然后相应地使用CSS类？

EG。

.body-bg{
    Background-image:url(...);
}
.div-bg{
    Background-image:url(...);
}
body class="body-bg"> 
    div class="div-bg></div>
    div class="body-bg></div>
    div class="div-bg></div>
/body>

Answer 3

您可以制作使用fixed位置。

HTML：

<body style="background:url('/Content/Images/BodyBackground.jpg') repeat-y;">
    <div style="background-image:url('/Content/Images/DivBackground.jpg')">
        <div style="height:100px;width:200px"></div>
        <div style="height:100px;width:200px;background:url('/Content/Images/BodyBackground.jpg') fixed;"> 
            SHOW BodyBackground.jpg IMAGE HERE
        </div>
        <div style="height:100px;width:200px"></div>
    </div>
</body>

因为背景位置设置为fixed，所以它的位置对整个页面是全局的而不是div本身。即使您更改了页面中元素的位置，它仍然看起来像该区域是透明的。

是否可以在某个元素中显示背景图像？

3 个答案: