2015-11-19 59 views
1

只是想让图片成为背景,在适当的位置修复。谢谢!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 - 英雄”

+0

其 “形象”?你的CSS背景? –

回答

2

您正在使用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

希望这有助于!

+0

Thankyou <3希望这个作品; D – Robinlemon

+0

插手它,谢谢非常快速的回复! – Robinlemon

+0

我也希望如此,不要忘记,如果你认为我的答案是正确的答案,将我的答案标记为正确答案,以便其他具有相同问题的人可以快速找到解决方案@GenaratedPixelz – Simplicity

2

您的背景大小设置为100%100%,而身高仅为52px。这意味着背景图片高度也只有52px。

设置你的背景大小:

background-size: 100%; 
+0

Thankyou <3希望这个作品; D – Robinlemon