首页 > 程序开发 > web前端 > HTML/CSS >

css头部banner背景图适配

2017-08-19

css头部banner背景图适配。每个网站都有banner图,基本上设计图banner图宽度都为1920px,当然,适配的方式有多种。下面简单介绍几种:1,最愚蠢的办法就是用媒体查询(不多说);

每个网站都有banner图,基本上设计图banner图宽度都为1920px,当然,适配的方式有多种。下面简单介绍几种:

1,最愚蠢的办法就是用媒体查询(不多说);

2,用 img 标签去自适应,但是缺点也很明显,如何图片上很多字体等需要手写,当小到一定的程度位置就会不对,当很大时,图片分辨率也会有问题

3,下面介绍一种个人常用的,先贴代码

.course-class-infos {
position: relative;
    background: #666;
}           
.info-bg ,.cover-img-wrap{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}       
.cover-img-wrap {
    z-index: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

代码简单,就不多说,在ie下还是有点小问题,取舍下,这个还是最好的选择,另外,写自己内容的地方要注意层级问题

相关文章
最新文章
热点推荐