css - 不显示背景图像

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;}

---

为什么要投反对票？最好写点东西，thx。