HTML文本出現在懸停的圖像上

Question

我一直在努力嘗試讓圖像動畫時，我把鼠標懸停在他們身上。我找到了很多例子，但是我發現它們很難實現並適應我的需求。這裏是我的代碼：

#box { 
 
    width: 100%; 
 
    border-radius: 5px; 
 
    box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, .45); 
 
    background: url("http://placehold.it/1080x720"); 
 
    background-size: cover; 
 
} 
 
#cover { 
 
    background: rgba(0, 0, 0, .75); 
 
    text-align: center; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 1s ease; 
 
    -moz-transition: opacity 1s ease; 
 
} 
 
#box:hover #cover { 
 
    opacity: 1; 
 
} 
 
#text { 
 
    font-family: Arial; 
 
    font-weight: bold; 
 
    color: rgba(255, 255, 255, .84); 
 
    font-size: 60px; 
 
}

<div id="box"> 
 
    <div id="cover"> 
 
    <span id="text">Comics</span> 
 
    </div> 
 
</div>

設置高度時，我的困難來自，我的網站需要能夠重新大小的圖像;在設置圖像的寬度（而不是現在的背景圖像）之前，我將其設置爲100％，並且會使寬度的高度正確。但是現在我使用的是背景圖片，我無法自動設置高度，只需要將鼠標懸停時顯示的文字大小。 我希望這是有道理的，謝謝！

編輯 我想如果這不起作用任何人都可以指向另一種方法，我可以做同樣的事情嗎？

UPDATE 這就是我試過你的例子Kaan時發生的事情。

#box { 
 
    width: 100%; 
 
    border-radius: 5px; 
 
    box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, .45); 
 
    background: url("http://placehold.it/1080x720") no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
#cover { 
 
    background: rgba(0, 0, 0, .75); 
 
    text-align: center; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 1s ease; 
 
    -moz-transition: opacity 1s ease; 
 
} 
 
#box:hover #cover { 
 
    opacity: 1; 
 
} 
 
#text { 
 
    font-family: Arial; 
 
    font-weight: bold; 
 
    color: rgba(255, 255, 255, .84); 
 
    font-size: 60px; 
 
} 
 
#ContainerTest{ 
 
    width: 40%; 
 
    }

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
 
<script> 
 
    $(window).load(function(){ 
 
    var height = $(window).height(); // returns height of browser viewport 
 
    $("#box").css({'height': height + 'px'}); 
 
    $("#cover").css({'height': height + 'px'}); 
 
}); 
 

 
function resizeContent(){ 
 
    var newWidth = $(window).width(); 
 
    var newHeight = $(window).height(); 
 

 
    $("#box").height(newHeight).width(newWidth); 
 
    $("#cover").height(newHeight).width(newWidth); 
 
} 
 

 
$(window).resize(function() { 
 
    resizeContent(); 
 
}); 
 
</script> 
 
<div id="ContainerTest"> 
 
<div id="box"> 
 
    <div id="cover"> 
 
    <span id="text">Comics</span> 
 
    </div> 
 
</div> 
 
</div>

也沒有工作，但我需要讓自己以什麼其實我想要它做的更加清晰。你看到我有一個容器是屏幕的40％，然後我希望這個圖像適合它，所以你可以通過將圖像的寬度設置爲100％來看到整個事物，然後調整高度以使圖像仍然是寬度的正確高度，所以它不會扭曲。當你用普通圖像做這件事時，它會自動做到這一點，只需設置寬度，但作爲背景它不會。

Answer 1

通過使用jQuery，你可以解決這個問題。

$(window).load(function(){ 
    var height = $(window).height(); // returns height of browser viewport 
    $("#box").css({'height': height + 'px'}); 
    $("#cover").css({'height': height + 'px'}); 
}); 

function resizeContent(){ 
    var newWidth = $(window).width(); 
    var newHeight = $(window).height(); 

    $("#box").height(newHeight).width(newWidth); 
    $("#cover").height(newHeight).width(newWidth); 
} 

$(window).resize(function() { 
    resizeContent(); 
}); 

您還需要更改您的#box css與下面的代碼。

#box { 
    width: 100%; 
    border-radius: 5px; 
    box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, .45); 
    background: url("http://placehold.it/1080x720") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

它會工作。這裏是解決方案的jsfiddle鏈接：https://jsfiddle.net/fL0n3mcj/1/