Question

所以，我有一个带背景图像的div。问题是，当页面加载时，背景图像不会显示。虽然，如果我将鼠标悬停在它上面，然后将鼠标移动到其他地方（我有一些功能，我将在下面显示），bg就会显示出来。我看看检查元素但是已经改变了。我的css背景是攻击性的，来自jquery的那个是可用的，同样的。

HTML：

<div class="item">
    <div class="p1" id="1">
        <i class="fa fa-close"></i>
        <h2>Daily UI</h2>
        <h4>Click on the name for more details.</h4>
    </div>
</div>

SCSS：

.item {
    margin-bottom: 25px;
    background-color: $lgray;
    border-radius: 5px;
    box-shadow: 0px 0px 15px 0.75px rgba(0, 0, 0, 0.05);
    padding: 25px;
    width: 40vw;
    height: 25vw;

    div { 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        opacity: 1;

        h4 { margin: 0; }
        i {
            position: absolute;
            top: 5px;
            right: 5px;
            transition: 0.3s ease;

            &:hover { opacity: 1; }
        }
        i, h2, h4 { display: none; }
    }

    .p1{ background: url("img/1.png") 0% 0% / cover; }
}

JS（jQuery）：

$(".item div").hover(function() {
    var aux = $(this).attr('id'); aux++;
    $(this).fadeTo('fast', 0.1, function() {
        $(this).css("background", "url('img/" + aux + ".png')");
        $(this).css("background-size", "cover");
        $(this).find('*').fadeToggle("fast", "linear");
    }).fadeTo('fast', 1);
}, function() {
    var aux = $(this).attr('id');
    $(this).fadeTo('fast', 0.1, function() {
        $(this).css("background", "url('img/" + aux + ".png')");
        $(this).css("background-size", "cover");
        $(this).find('*').fadeToggle("fast", "linear");
    }).fadeTo('fast', 1);
});

Answer 1

我只是在代码笔中复制了你的代码，它运行良好。我可以看到背景图片。我刚用一些随机图片替换了你的链接。

// codepen.io/anon/pen/aYONjO

尝试在p1 div上放置宽度和高度，因为背景图像需要定义高度和宽度才能显示。虽然，你已经在.item上定义了高度和宽度，但它似乎对我很有用......

也许你的链接搞砸了？看看你是否给了他正确的道路..

背景没有显示（悬停功能可能？）

1 个答案: