不显示背景图像

Question

这是我在页面内的html代码

<style type="text/css">
                            .container{width:100%;}
                            .left{float:left;}
                            .right{float:right;}
                            .center{margin:0 auto;}
                        </style>
                        <ul class="invite container" >
                            <li class="container">
                                <span class="left">
                                    <img src="images/main-bride.jpg" height="200px" />
                                </span>
                                <span class="frame right">
                                    <img src="images/main-groom.jpg" height="200px" />
                                </span>
                                <!-- <span class="center" background="images/frame.png"> hello</span> -->
                            </li>

                            <!-- <li class="right">
                                <span class="frame"><img src="images/main-groom.jpg" height="200px" /></span>
                            </li> -->

                        </ul>

这是CSS代码：

.frame {
display: block;
line-height: 0px;
background: url(../images/frame.png) no-repeat center center;
}

.frame img {border: 10px solid #fff;}

找到其他所有可用的东西，但仅背景图像不可见。 有什么我想念的吗？ 请帮助。

Answer 1

如果您的背景应该在图片周围10像素，而不是图片的白色边框并且图片正在隐藏它。

尝试添加：

.frame {display: block; padding: 10px; background-repeat: repeat;}
.frame img {border: 0px;}

并检查图像“周围”是否可见。 请记住，frame.png可能很小，但仍隐藏在图像下方。 您必须谨慎调整所有尺寸。

不用多说了：在这种情况下，您要在父元素上设置填充，因此图像的每一侧都将有10px的空间。 在这种情况下，将从.frame元素中看到10px的帧，并且图像将覆盖其中心。

---

如果要背景覆盖图像，请使用：

.frame img {display: none;}
.frame {display: block; height: ...px; width: ...px;}

---

为什么要投票？ 写点东西，太好了。

Answer 2

是背景中的css在文件中比索引页高一级或在索引页上内联吗？ 您的背景网址的CSS说

background: url(../images/frame.png) no-repeat center center;

background: url(..            go up one level
               /images/     down into images folder
               frame.png    find the file called frame.png
        ) no-repeat center center;

检查您的路径。