//test.css

.index-banner-top {

    width: 100%;

    background: url(../imgs/guanyu.png) no-repeat center center;

    height: 210px;

    background-size:cover

}

@media only screen and (max-width: 640px){

    .index-banner-top {

        height: 100px;

    }

}
//test.html
<div class="index-banner-top"></div>

电脑端显示：

手机端显示：

网页中顶部banner图自适应css的更多相关文章

  1. element-ui中轮播图自适应图片高度

    哈哈,久违了各位.我又回来了,最近在做毕设,所以难免会遇到很多问题,需要解决很多问题,在万能的博友帮助下,终于解决了Element-ui中轮播图的图片高度问题,话不多说上代码. 那个axios的使用不 ...

  2. 网页中如何用 CSS 设置打印分页符

    Word 中按 Ctrl + Enter 创建一个分页符,方便打印,其实网页中也可以,用 CSS 的 page-break-after:always;. <p>第 1 页</p> ...

  3. 使用CSS3中的input标签与lable标签组合实现banner图的切换

    在做网页时,我们经常可以碰到banner图的切换.对于那些JS薄弱的同学来说,这就很尴尬了.今天,我来告诉大家如何使用CSS做出banner图切换的效果. 这里,用到了lable标签与input的组合 ...

  4. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

  5. 这是假的JS——利用CSS Animation实现banner图非交互循环播放

    话不多说,先来张html和css代码截图~ 注意事项: 1.如果想在每张图前进行停顿,可以在keyframes中的每一步前加上一小段与下一张相同的代码: 2.如果想要在实现无违和感的最后一张与第一张的 ...

  6. 最简单实用的JQuery实现banner图中的text打字动画效果！！！

    下面,就让小博详细介绍如何实现上面GIF实现的banner图中的文字动画效果,最简单实用的方法(鉴于代码量较小,就内嵌在一个HTML文件中了): 首先,我们要在header导入一个jQuery,并新建 ...

  7. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  8. Bootstrap css栅格 + 网页中插入代码+css表格

    设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...

  9. 利用CSS的@font-face属性 在网页中嵌入字体

    字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...

随机推荐

  1. Java中定义常量方法及建议（Class/Interface）

    Class定义常量方法(推荐方法) //final修饰符 public final class Constants { //私有构造方法 private Constants() {} public s ...

  2. android平台修改默认语言的那点事

    转自:https://blog.csdn.net/qinghua0706/article/details/8243858 最近开始做智能机,用的是展讯6820平台,第一个需求就是改默认语言,一般碰到不 ...

  3. poi 升级至4.x 的问题总结(POI Excel 单元格内容类型判断并取值)

    POI Excel 单元格内容类型判断并取值 以前用 cell.getCachedFormulaResultType() 得到 type 升级到4后获取不到了 换为:cell.getCellType( ...

  4. XSplit Quality, VBV-Buffer, VBV-Maxrate and Preset Settings

    XSplit uses the x264 encoder, so let's start off by saying that parameters mentioned in the title, w ...

  5. 解析XML出错，无法创建DOMDocument对象

    [问题] 加载XML配置文件时,创建DOMDocument对象总是失败,创建代码如下: MSXML2::IXMLDOMDocumentPtr pXMLDoc; MSXML2::IXMLDOMEleme ...

  6. [Docker] Running Multiple Containers for an Angular, Node project

    The code is from Plusight course, github link is here. In this post, we will give a overview about h ...

  7. Substr与mb_substr区别

      <?php $str = substr('helloword',3,4);//从下标3开始截取截取4个字符 $str = substr('helloword',3);//从截取掉前三个字符 ...

  8. Community宣言

    Community宣言 一个幽灵,共产主义的幽灵,在欧洲游荡.为了对这个幽灵进行神圣的围剿,旧欧洲的一切势力,教皇和沙皇.梅特涅和基佐.法国的激进派和德国的警察,都联合起来了. 有哪一个反对党不被它的 ...

  9. aiohttp文档翻译-server(一)

    web server 快速入门 运行一个简单的web server 为了实现web server, 首先需要实现request handler 一个 request handler 必须是一个coro ...

  10. why deep learning works

    https://medium.com/towards-data-science/deep-learning-for-object-detection-a-comprehensive-review-73 ...