Question

我正在尝试这个404错误页面：

如何以正确的比例将图像保持在屏幕中心并调整大小？我尝试添加边距，但背景图片会扩展到整个页面！

代码

<div id="tv">
    <div id="content"> <a href="http://blog.spoongraphics.co.uk/" id="logo"><img src="http://media.dday.it/roby/404/404_files/images/ddaylog.png" alt="DDay Logo"/></a> 
            <h1 class="scale1" style="font-size: 115.2px;">404</h1>

            <h2 class="scale2" style="font-size: 38.4px;"><span>Non c'è nulla</span> su questa frequenza</h2>

        <p class="scale3" style="font-size: 50px;">Cambia canale e torna su <a href="http://www.dday.it/">DDay.it</a> oppure chiedi aiuto <a href="http://www.dday.it/contact">all'antennista</a>
        </p>
    </div>
</div>

CSS

@font-face {
    font-family:'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: local('Montserrat-Bold'), url(http://themes.googleusercontent.com/static/fonts/montserrat/v3/IQHow_FEYlDC4Gzy_m8fcgFhaRv2pGgT5Kf0An0s4MM.woff) format('woff');
}
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    background-color: #000;
    background-image: url(http://media.dday.it/roby/404/404_files/images/static.gif);
    font-family:'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 62.5%;
}
body, html, div {
    height: 100%;
}
#tv {
    background-image: url(http://media.dday.it/roby/404/404_files/images/tv.png), url(http://media.dday.it/roby/404/404_files/images/shading.png);
    background-size: 100% 100%;
}
#content {
    width: 60%;
    height: 65%;
    position: relative;
    top: 20%;
    left: 10%;
    text-align: center;
    color: #fff;
}
#logo {
    display: block;
    width: 50%;
    margin: 0 auto 2em auto;
}
#logo img {
    max-width: 100%;
}
h1 {
    font-family: Serif;
    font-size: 10em;
    margin: 0 0 0.1em 0;
}
h2 {
    font-size: 3em;
    text-transform: uppercase;
    line-height: 1.5em;
    margin: 0 0 1.3em 0;
}
h2 span {
    font-size: 2.05em;
    display: block;
}
p {
    font-size: 2em;
}
a {
    color: #4be300;
    text-decoration: none;
}
a:hover {
    color: #4be300;
}

Answer 1

Ciao，:)）

您可以使用mediaqueires设置font-size： http://jsfiddle.net/LAKXK/3/

@font-face {
    font-family:'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: local('Montserrat-Bold'), url(http://themes.googleusercontent.com/static/fonts/montserrat/v3/IQHow_FEYlDC4Gzy_m8fcgFhaRv2pGgT5Kf0An0s4MM.woff) format('woff');
}
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    background-color: #000;
    background-image: url(http://media.dday.it/roby/404/404_files/images/static.gif);
    font-family:'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 62.5%;
}
body, html, div {
    height: 100%;
}
#tv {
    background-image: url(http://media.dday.it/roby/404/404_files/images/tv.png), url(http://media.dday.it/roby/404/404_files/images/shading.png);
    background-size: 100% 100%;
}
#content {
    width: 60%;
    height: 65%;
    position: relative;
    top: 20%;
    left: 10%;
    text-align: center;
    color: #fff;
}
#logo {
    display: block;
    width: 50%;
    margin: 0 auto 2em auto;
}
#logo img {
    max-width: 100%;
}
h1 {
    font-family: Serif;
    font-size: 10em;
    margin: 0 0 0.1em 0;
}
h2 {
    font-size: 3em;
    text-transform: uppercase;
    line-height: 1.5em;
    margin: 0 0 1.3em 0;
}
h2 span {
    font-size: 2.05em;
    display: block;
}
p {
    font-size: 2em;
}
a {
    color: #4be300;
    text-decoration: none;
}
a:hover {
    color: #4be300;
}
@media all and (max-width:2700px) {html {font-size:16px;transition:1s;}}
@media all and (max-width:2000px) {html {font-size:14px;transition:1s;}}
@media all and (max-width:1600px) {html {font-size:13px;transition:1s;}}
@media all and (max-width:1200px) {html {font-size:12px;transition:1s;}}
@media all and (max-width:1100px) {html {font-size:11px;transition:1s;}}
@media all and (max-width: 900px) {html {font-size:10px;transition:1s;}}
@media all and (max-width: 700px) {html {font-size:9px;transition:1s;}}
@media all and (max-width: 500px) {html {font-size:8px;transition:1s;}}
@media all and (max-width: 300px) {html {font-size: 6px;transition:1s;}}

在你的在线风格中使用em（你应该把它移到CSS文件中）

<script src="./404_files/jquery.fittext.js"></script>
<script src="./404_files/scripts.js"></script>
<div id="tv">
    <div id="content"> <a href="http://blog.spoongraphics.co.uk/" id="logo"><img src="http://media.dday.it/roby/404/404_files/images/ddaylog.png" alt="DDay Logo"/></a> 
            <h1 class="scale1" style="font-size: 3em;">404</h1>

            <h2 class="scale2" style="font-size: 3em;"><span>Non c'è nulla</span> su questa frequenza</h2>

        <p class="scale3" style="font-size: 3em;">Cambia canale e torna su <a href="http://www.dday.it/">DDay.it</a> oppure chiedi aiuto <a href="http://www.dday.it/contact">all'antennista</a>
        </p>
    </div>
</div>

Bella pagina

比例中心一个div保持缩放选项

1 个答案: