首页>新闻动态>网络新原创知识
自适应的背景图片该如何布局
在实际的网站建设过程中,一张图片经常用作网站的背景,然后在这个背景上面再布局放置一些元素,同时要求这个背景能够自适应于电脑与手机端,换句话说,就是移动端宽度是100%形式,而PC端是用一张1920px宽度的图片来实现两端自适应,下面就这种背景图片该如何布局展开讲解。

一个个的来,今天我们不讲原理,首先制作好一张图片,比如1920px与400px,图片名称为dd.jpg,电脑布局即放置在这个@media screen and (min-width:900px)里面的,直接上代码:

 @media screen and (min-width:900px)
{
.hui1{width:100%; height:400px; background: url(dd.jpg) no-repeat center;}
.myff{ font-size:40px; color:#FF0000;}
}

上面的是网站建设的css样式,使用它布局如下:

<div class="hui1">
<div class="myff">
这是放在网站背景图片上的内容或是模块或是div区域,这个hui1是针对整个背景图片来的,而这个myff样式是针对图片上的布局来的。
</div>
</div>

下面继续研究自适应于手机即移动端的布局,先上代码:

@media screen and (max-width:500px)
{
.hui1{width:100%;height: 200px;background: url(dd.jpg) no-repeat; background-size:100% 100%;}
.myff{ font-size:16px;}
}

手机布局的代码当然与上面的电脑是一样的,否则就不能称之为响应式的了。

再说一下上面叙述的简单原理吧:

首先电脑端的,既然是自适应,自然宽度要设为100%,但此时一定要设置高度,这里要说一下,具体在网站制作中,不管在什么地方,也不管是什么形式的背景图片,都必须要设定高度才行,至于后面的background: url(dd.jpg) no-repeat center则代表背景图片不重复,并且居中,这个正常用在网站的内页banner图片。

在这儿再教大家一个技巧,就是如何让内页的banner产生链接,其实很简单,假如banner布局是<div class="abc"></div>,要加链接直接这样就行了:<a href=""><div class="abc"></div></a>,就这么简单。

手机端的css实际上跟电脑有点差不多,只是多了个background-size:100% 100%,而且兼容IE7及以上的浏览器,当然背景的高度也要设置一下。


下一条:化工行业企业产品网站解决方案
文章分类
热门文章
网站套餐 / 解决方案 / 客户案例 / 公司优势 / 新闻动态 / 主机域名 / 关于我们 / 返回首页
版权所有:南京希丁哥网络信息服务有限公司