Question

您好我在使用role="main"属性来定义我的网页的主要内容。问题是如果我使用：

<div role="main">
    <article class="post-preview">
        <div class="post-preview-img" style="background-image:url(img/capeEnrage.jpg);"></div>
    </article>
</div>

我的内容不会显示？如果我删除带有div属性的role标记，则会显示没有任何问题。

我的CSS如下：

div[role="main"] article.post-preview {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    position:relative;
}
div[role="main"] article.post-preview div.post-preview-img {
    width:inherit;
    height:inherit;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    position:absolute;
    opacity:1;
    z-index:2;
}

如果有人能够提供任何关于我做错事的见解，我将非常感激。

Answer 1

您必须在width元素（下面的示例）或具有图像集的height的css中设置article和div作为背景，否则背景图像将不会显示。它看起来与role属性无关。

div[role=main] article.post-preview {
    width: 100px; /* custom size, you may change this to your liking */
    height: 100px; /* same as above */
    margin: 0px;
    padding: 0px;
    position: relative;
}

<强> DEMO HERE

编辑＃1

我看了一眼，但没有找到解释为什么它不能为主要div指定%和width的百分比（height）。但是，您可以做的一件事是将background-size更改为contain而不是cover，这样图像就可以很好地适应容器div。

我还更正了background-repeat下代码中的background-position位：

div[role="main"] article.post-preview div.post-preview-img {
    /* ... */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    /* ... */
}

<强> HERE IS THE UPDATED DEMO

编辑＃2

或者你可以改用img;它会给你想要的结果。

<强> Here is the demo using the img element

Answer 2

您只需要将 CSS 代码中的高度从 100％编辑为 100px ，仅此而已。 ..

Answer 3

感谢您抽出宝贵时间来研究这个问题。不幸的是，我必须删除角色属性。

如果我使用以下代码，它将起作用：

div[role=main] article.post-preview {
width: 100%; 
height: 100%; 
margin: 0px;
padding: 0px;
position: absolute;
}

div[role="main"] article.post-preview div.post-preview-img {
width:inherit;
height:inherit;
background-size:contain;
background-position:center;
background-repeat:no-repeat;
position:absolute;
opacity:1;
z-index:2;
}

上面代码的问题在于，如果我想拥有多个文章（例如博客），其中心背景图片是宽度和高度的浏览器窗口的100％，我必须更改文章的位置相对而且没有显示任何内容，我不知道为什么，但我已经决定删除博客索引的角色属性。

HTML角色属性导致内容无法显示

3 个答案:

编辑＃1

编辑＃2