Question

将div与固定背景图像组合在一起时，我在使用HTML / CSS时遇到了麻烦，并且滚动png具有透明背景。

当使用固定背景图像滚动div时，带有png的div会拾取页面的背景颜色。 Here's an example where the body is red so it is clear what's going on.

这是我的标记：

<body bgcolor="red">
<div id="bkg"></div>
<div><img src="hands2.png"></div>
<div id="bkg2"></div>

这是css：

*{margin:0;padding:0;}
img{max-width: 100%;}
#bkg{background:url(danicool.jpg)repeat-x;background-attachment:fixed;height:650px;width:100%;}
#bkg2{background:url(danifreak.jpg)repeat-x;background-attachment:fixed;height:650px;width:100%;}

我尝试添加背景：透明到每个可能影响无效果的div。

是否无法使用具有透明背景的png滚动固定背景图像？

Answer 1

＆＃13;

img{max-width: 100%;}

#bkg{
background:url(http://www.moutonotopia.com/transparency/danicool.jpg)repeat-x;
background-attachment:fixed;
height:650px;width:100%;}

#bkg2{
background:url(http://www.moutonotopia.com/transparency/danifreak.jpg)repeat-x;
background-attachment:fixed;
height:650px;width:100%;}

.hands {
  background-color:rgba(255,0,0,0.5);
    position: absolute;
  top: 400px;
   width: 100%;

}

＆＃13;

<div id="bkg"></div>
    <div class="hands"><img src="http://www.moutonotopia.com/transparency/hands2.png"></div>
    <div id="bkg2"></div>

＆＃13;

你好llyfre你可以像这样设置

<div class="bg-img"><img src="//www.moutonotopia.com/transparency/hands2.png"></div>

<强> CSS

＆＃13;

*{margin:0;padding:0;}
body{
    background:url(//www.moutonotopia.com/transparency/danicool.jpg)repeat-x;
background-attachment:fixed;
height:650px;width:100%;
    
}
.bg-img{
    background-color:rgba(255,0,0,0.5);
    margin-top:100px;
}
img{max-width: 100%;}

#bkg{
background:url(//www.moutonotopia.com/transparency/danicool.jpg)repeat-x;
background-attachment:fixed;
height:650px;width:100%;}

#bkg2{
background:url(//www.moutonotopia.com/transparency/danifreak.jpg)repeat-x;
background-attachment:fixed;
height:650px;width:100%;}

＆＃13;

   
    <div class="bg-img"><img src="//www.moutonotopia.com/transparency/hands2.png"></div>

＆＃13;

Answer 2

你的问题在于手div正在流动，占用空间。

您希望它不在流动状态，因此2张图像彼此相邻。

最简单的解决方法是设置绝对位置（然后调整位置;

use JSON ();

$content = "{WHATEVER JSON CONTENT}";

$content = JSON->new->utf8->decode($content);

*{margin:0;padding:0;}

img{max-width: 100%;}

#bkg{
background:url(http://www.moutonotopia.com/transparency/danicool.jpg)repeat-x;
background-attachment:fixed;
height:650px;width:100%;}

#bkg2{
background:url(http://www.moutonotopia.com/transparency/danifreak.jpg)repeat-x;
background-attachment:fixed;
height:650px;width:100%;}

.hands {
    position: absolute;
  top: 400px;
   width: 900px;

}

用css背景图片

2 个答案: