Question

我有这个网站

https://preview.c9.io/pgonzalez/demo-project/html/test.html?_c9_id=livepreview0&_c9_host=https://ide.c9.io

顶部的徽标是图像，我正在使用这种技术

 h1{
            position:relative;
        }
        span{
            width:100%;
            height:100%;
            position:absolute;
            background-image:url(Images/headertext.png);
            background-repeat: no-repeat;
        }
     </style>
 </head>
 <body>
    <header>
        <h2>
        <span></span>
        The rainy season
        </h2>
    </header>

它按预期工作。但是，同样的技术在这里不起作用

https://demo-project-c9-pgonzalez.c9.io/html/API.html

您将看到背景图像如何显示两次并处于完全不同的位置，我使用的代码是相同的

h1 {
position: relative;
}

span {
width: 100%;
height: 100%;
position: absolute;
background-image: url(Images/headertext.png);
background-repeat: no-repeat;

无法弄清楚造成这种情况的原因。想法？

Answer 1

这是因为页面上还有另一个范围。

你想：

h1 span {
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url(Images/headertext.png);
    background-repeat: no-repeat;
}

并且可能想要更具体地引用它。您将CSS将该背景添加到页面上的任何span。我上面发布的内容只会影响span代码为h1个孩子的{{1}}。

Answer 2

这是因为一个页面标题是这样定义的，它不起作用：

        #headertest{
            position:absolute;
            width:100%;
            height:100%;
            background-image:url(../Images/developerstitle.png);
            background-repeat:no-repeat;
        }

在另一个页面上，这项技术确实有效，定义为：

        header{
            color:white;
            background-color:black;
            padding:10px;
            text-align:center;
            background-image:url(Images/headerbackground.jpg);
            background-attachment:fixed;
            background-position:center;
        }

我的猜测是必须更改/删除位置声明。

CSS图像替换技术重复图像

2 个答案: