Question

Hihi，我正在为即将到来的游戏制作一个即将推出的网站，我几个小时都在苦苦挣扎！ http://endlessreturn.com/是网站，基本上，无论如何，我可以得到“查看预告片”更接近实际预告片吗？

    IMG.logo {
    display: block;
    margin-left: auto;
    margin-right: auto }

IMG.copyright {
    display: block;
    margin-left: auto;
    margin-right: auto }

.center
{
margin-left:auto;
margin-right:auto;
width:100%;
display: block;
background-image:url('/images/trailer.png');
background-repeat:no-repeat;

background-position:right; 
}

img.floatLeft { 
    float: left; 
    margin: 4px; 
}

body
{
background-image:url('/images/bg.gif');
background-repeat:repeat-x;
}


#wrapper {
    width: 467px;
    margin: 29px auto;
    }
#logo {
    height: 397px;
    text-indent: -10000px;
    margin-bottom: -135px;
    }

#form {
    width: 700px;
    margin: 25px auto 15px auto;
    }
form {
    background: url(/images/newsletter.png) no-repeat;
    height: 90px;
    }
input {
    background: none;
    border: none;
    outline: 0;
}
input.text {
    width: 400px;
    height: 75px;
    padding: 0px 0px 30px 90px;
    color: #505050;
    font-size: 16px;
    float: left;
    }
input.submit {
    width: 165px;
    height: 60px;
    padding: 50px 0 13px 10px;
    float: right;
    cursor: pointer;
    }.center iframe {
    text-align: center;
    float: none;
}



<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Endless Return - 2D MMORPG</title>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
</head>
<body>

<IMG class="logo" src="/images/logo.png" alt="logo">
<div class="center">
<center><iframe src="http://www.youtube.com/embed/2IMOh6JAJkY" width="640" height="360" frameborder="0" allowfullscreen></iframe></center>

</div>
</div>
<IMG class="copyright" src="/images/copyright.png" alt="logo">
</body>
</html>

Answer 1

您的图片，CSS需要进行调整。

您需要让图片更大一些，让它可以作为当前div的背景居中，并在视频旁边放置箭头和文字。

请参阅此示例，图片为1280px： enter image description here

此示例使用与视频宽度相关的足够宽的图像。

更新的CSS：

.center {
    background-image: url("/images/trailer.png")
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

链接 to the image与width的1280像素。

Answer 2

而不是右中心，使用x％y％第一个值是水平位置，第二个值是垂直位置。左上角为0％0％。右下角是100％100％。如果只指定一个值，则另一个值为50％。。默认值为：0％0％

在css靠近中心的位置？

2 个答案: