Home > Backend Development > PHP Tutorial > 如何在页首添加一张背景图片

如何在页首添加一张背景图片

WBOY
Release: 2016-06-06 20:38:21
Original
1180 people have browsed it

Navy主题如何在页首添加一张图片可以http://www.ikk.me/这样子顶部添加背景图片

他的代码是【点击查看】

回复内容:

Navy主题如何在页首添加一张图片可以http://www.ikk.me/这样子顶部添加背景图片

他的代码是【点击查看】

看了下代码,就是给 section 加了个 background,为了使固定宽度的图片填充各分辨率的屏幕,将其设置为 cover

HTML 部分:

<code><section class="billboard">...</section>
</code>
Copy after login

CSS 部分:

<code>.billboard {
    background: url('../img/mirai.jpg') center center repeat-x;
    background-size: cover;
}
</code>
Copy after login
Copy after login

我对该网站所用的建站流程不是很了解。但是找出图片的来源还是很简单的。

首先,加载了一张图片的前提是该图片被请求。所以查看请求的图片,第一个就是该图片,名字是mirai.jpg.

然后,将该图片导入页面的代码可能出现在三处,html中,js中和css中,html和js经过搜索都搜不到mirai。那么对所有的css进行排查,发现costoms.css中包含这么一段:

<code>.billboard {
    background: url('../img/mirai.jpg') center center repeat-x;
    background-size: cover;
}
</code>
Copy after login
Copy after login

于是在控制台中执行$('.billboard')选择到一个对象,及网站标题所在的section。换句话说,只要通过css将网站标题的背景图设成该图片即可。
顺便一提,该图片是远大于网页标题的,所以作者通过对标题设置了很大的padding来保证图片可以完全显示而不被裁剪或压缩。

Related labels:
php
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template