CSS中奇怪的圖片分辨率

只是想讓圖片成爲背景，在適當的位置修復。謝謝！CSS中奇怪的圖片分辨率

編輯：

div { 
color: #13eee6; 
font: 30px Roboto; 
position: absolute; 
bottom: 0; 
left: 0;

}

PHP：

<!DOCTYPE html> 
<html> 
    <body> 
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> 
    <div id="player"></div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

    <script> 
    // 2. This code loads the IFrame Player API code asynchronously. 
    var tag = document.createElement('script'); 

    tag.src = "https://www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

    // 3. This function creates an <iframe> (and YouTube player) 
    // after the API code downloads. 
    var player; 
    function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
     height: '1', 
     width: '1', 
     //videoId: 'M7lc1UVf-VE', 
     playerVars: 
     { 
     listType:'playlist', 
     list: 'PLsVV8G4dmXyE2mSm3ZSz_AcNVduhw2ZwM' 
     }, 
     events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange, 

     } 
    }); 
    } 

// console.log(player); 



    // 4. The API will call this function when the video player is ready. 
    function onPlayerReady(event) { 
    event.target.playVideo(); 

    $('.title').text(event.target.getVideoData().title); 

    } 

    // 5. The API calls this function when the player's state changes. 
    // The function indicates that when playing a video (state=1), 
    // the player should play for six seconds and then stop. 
    var done = false; 
    function onPlayerStateChange(event) { 
    if (event.data == YT.PlayerState.PLAYING && !done) { 
     setTimeout(stopVideo, 6000); 
     done = true; 
    } 
    console.log(event); 
    if ((event.data == -1)) { 
     $('.title').text(event.target.getVideoData().title); 
    } 
    }  


    function stopVideo() { 
    player.stopVideo(); 
    } 
</script> 

<div class="title"> </div> 
<link rel="stylesheet" type="text/css" href="style.css">

CSS：

body { 
    background-image: url("http://i.imgur.com/z6fgaW8.png"); 
    background-color: #cccccc; 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
} 

div { 
    color: #13eee6; 
    font: 30px Roboto; 
}

網站：http://darklegionrp.byethost24.com/ 應該是一個圖像背景，1,1視頻播放器（無法觀看）播放背景音樂。音樂在播放列表中。 jQuery的獲取在播放列表中的當前視頻的名稱，並將其寫在屏幕上，這首歌的名字應該是ontop的圖像的地方說：「Nightcore - 英雄」

來源

2015-11-19 Robinlemon

其「形象」？你的CSS背景？ –

您正在使用background-size: 100% 100%;嘗試改變這background-size: cover;當我試圖在Chrome開發者控制檯中改變它，它放大了圖片。

您的代碼將變爲：

body { 
    background-image: url("http://i.imgur.com/z6fgaW8.png"); 
    background-color: #cccccc; 
    background-size: cover;/* Note the change here */ 
    background-repeat: no-repeat; 
} 

div { 
    color: #13eee6; 
    font: 30px Roboto; 
}

一個體面的解釋檢查here

希望這有助於！

來源

2015-11-19 21:22:55 Simplicity

Thankyou <3希望這個作品; D – Robinlemon

插手它，謝謝非常快速的回覆！ – Robinlemon

我也希望如此，不要忘記，如果你認爲我的答案是正確的答案，將我的答案標記爲正確答案，以便其他具有相同問題的人可以快速找到解決方案@GenaratedPixelz – Simplicity

您的背景大小設置爲100％100％，而身高僅爲52px。這意味着背景圖片高度也只有52px。

設置你的背景大小：

background-size: 100%;

來源

2015-11-19 21:23:08 Tazius

Thankyou <3希望這個作品; D – Robinlemon

CSS中奇怪的圖片分辨率

回答

相關問題