精华内容
下载资源
问答
  • 一张清晰漂亮的背景图片能给网页加分不少...以下是用css实现图片全屏显示的方法: html: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-

    一张清晰漂亮的背景图片能给网页加分不少,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动。

    以下是用css实现图片全屏显示的方法:

    html

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>title</title>
    </head>
    <body>
    <div>
        <!--背景图片-->
        <div id="web_bg"></div>
        <!--其他代码 ... -->
    </div>
    </body>
    </html>

    css

    #web_bg{
      position:fixed;
      top: 0;
      left: 0;
      width:100%;
      height:100%;
      min-width: 1000px;
      z-index:-10;
      zoom: 1;
      background-color: #fff;
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-position: center 0;
    }

    下面,我们来分析一下,css中每句代码的作用是什么:

    position:fixed;  
    top: 0;  
    left: 0;

    这三句是让整个div固定在屏幕的最上方和最左方

    width:100%;  
    height:100%;  
    min-width: 1000px;

    上面前两句是让整个div跟屏幕实现一模一样的大小,从而达到全屏效果,而min-width是为了实现让屏幕宽度在1000px以内时,div的大小保持不变,也就是说在这种情况下,缩放屏幕宽度时,图片不要缩放(只有在1000px以内才有效)。

    z-index:-10;

    这个的目的是让整个divhtml页面中各个层级的下方

     background-repeat: no-repeat;

    上面这个是背景不要重复

    background-size: cover;
    -webkit-background-size: cover; 
    -o-background-size: cover;

    上面三句是一个意思,就是让图片随屏幕大小同步缩放,但是有部分可能会被裁切,不过不至于会露白,下面两句是为chrome和opera浏览器作兼容。

    background-position: center 0;

    上面这句的意思就是图片的位置,居中,靠左对齐。

    展开全文
  • 如下图,这是一张1920*900的图片 ...如何实现全屏显示呢,下面是实现方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景图片全屏</titl...

    如下图,这是一张1920*900的图片

     

    把它设为背景图片后,咦,怎么这样了呢?

     

    如何实现全屏显示呢,下面是实现方法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景图片全屏</title>
    </head>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        .container {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 2px;
            z-index: -999;
        }
        img {
            width: 100%;
            height: 100%;
      }
    </style>
    <body>
        <div class="container"><img src="bg.jpg" alt=""></div>    
    </body>
    </html>

     

    如果图片是竖向,却又想全屏显示某一部分呢。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景图片全屏</title>
    </head>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            background: url('bg2.jpg');
            background-size: cover;
            background-position: 100% 30%;
        }
    </style>
    <body>
    </body>
    </html>

     

    是不是感觉很有意思呢,哈哈哈哈哈~

     

    转载于:https://www.cnblogs.com/futai/p/5076317.html

    展开全文
  • 4:css设置背景图片全屏,如果只是将其当做一张图片显示,可以通过css控制。超大图片,引入进来即可根据大小缩放。 5:如果这张图片为背景图片由于背景图片不具有伸缩性,只能通过别的方法绕着解决,在ie中可以用,...

    展开全部

    1:一个很e69da5e887aa3231313335323631343130323136353331333366306533小的条状图,通过repeat后,形成一个很规则的大图背景。 但是css3出现以后,这个情况被改善了。background-size 属性可以让我们之前的希望成真。而且这个属性在firefox,chrome,以及ie9上都可以使用。

    2:背景图尺寸(数值表示方式)代码如下:#background-size{ background-size:200px 100px; }

    3:背景图尺寸(百分比表示方式) 代码如下:#background-size2{ background-size:30% 60%; }

    4:背景图尺寸(等比扩展图片来填满元素,即cover值)代码如下:#background-size3{ background-size:cover; }

    5:背景图尺寸(等比缩小图片来适应元素的尺寸,即contain值) 代码如下:#background-size4{ background-size:contain; }

    6:背景图尺寸(以图片自身大小来填充元素,即auto值)代码如下:#background-size5{ background-size:auto; }

    扩展资料:

    1:CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素。

    2:样式通常存储在样式表中,把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题。

    3:外部样式表可以极大提高工作效率,外部样式表通常存储在 CSS 文件中。

    4:css设置背景图片全屏,如果只是将其当做一张图片显示,可以通过css控制。超大图片,引入进来即可根据大小缩放。

    5:如果这张图片为背景图片由于背景图片不具有伸缩性,只能通过别的方法绕着解决,在ie中可以用,实现背景拉伸铺满整个浏览器,但其它的浏览器不支持。

    展开全文
  • 背景图片全屏这个功能只需要定义重复即可解决了当然这个是有一些技巧了,下面我们就来看一篇关于css3背景图片全屏显示例子了,具体的如下所示。如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很...

    背景图片全屏这个功能只需要定义重复即可解决了当然这个是有一些技巧了,下面我们就来看一篇关于css3背景图片全屏显示例子了,具体的如下所示。

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。

    比如一个容器(body,div,span)中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。

    所以实际的结果是只能重复显示,所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来控制背景图片的显示的。所以一般用作背景图片的有2类:

    1.是一整张大图,尺寸和区域大小刚好吻合

    2.一个很小的条状图,通过repeat后,形成一个很规则的大图背景。

    但是css3出现以后,这个情况被改善了。background-size 属性可以让我们之前的希望成真。

    而且这个属性在firefox,chrome,以及ie9上都可以使用。

    背景图尺寸(数值表示方式):

    CSS代码

    #background-size{

    background-size:200px 100px;

    }

    背景图尺寸(百分比表示方式):

    CSS代码

    #background-size2{

    background-size:30% 60%;

    }

    背景图尺寸(等比扩展图片来填满元素,即cover值):

    CSS代码

    #background-size3{

    background-size:cover;

    }

    背景图尺寸(等比缩小图片来适应元素的尺寸,即contain值):

    CSS代码

    #background-size4{

    background-size:contain;

    }

    背景图尺寸(以图片自身大小来填充元素,即auto值):

    CSS代码

    #background-size5{

    background-size:auto;

    }

    例子

    例子

    蚂蚁部落

    html{

    background:url(mytest/demo/antzone.jpg) no-repeat center center fixed;

    -webkit-background-size:cover;

    -moz-background-size:cover;

    -o-background-size:cover;

    background-size:cover;

    }

    上面的代码实现了全屏自适应的要求,并且图片会等比例缩放,不会出现变形现象。

    展开全文
  • 4:css设置背景图片全屏,如果只是将其当做一张图片显示,可以通过css控制。超大图片,引入进来即可根据大小缩放。 5:如果这张图片为背景图片由于背景图片不具有伸缩性,只能通过别的方法绕着解决,在ie中可以用,...
  • 在ScrollView中嵌套Linearlayout,在linearlayout布局中有很多的ImageView控件,然后在代码中添加帧动画,imageview指定大小时(比如layout_width=“50dp”),图片可以正常显示,但是...如何做才可以将图片全屏显示
  • 类似于一些网络游戏那样的全屏效果,只是这里是用一张图片 还准备再加上一些音乐,请教一下用C语言如何写出来呢
  • 全屏显示在界面中,因为后续还需要在图片上画直线并获取直线两点的色彩信息,所以采用了opencv的方式,求大神告知代码中哪里错了,怎么改才能让图片全屏显示(并不要求和界面尺寸大小一致)。代码如下:#!/usr/bin...
  • 如何启动app时全屏显示Default.png(图片)? 大部分app在启动过程中全屏显示一张背景图片,比如新浪微博会显示这张: 要想在iOS中实现这种效果,毫无压力,非常地简单,把需要全屏显示图片命名...
  •  在Gallery中动态设置底部虚拟按键NavigationBar 和StatusBar 且Gallery2 的GLSurfaceView全屏沉浸显示,从而实现真正的fullscreen。    [SOLUTION]  根据实际需要这种模式的显示的页面添加如下...
  • css 如何图片全屏的问题

    千次阅读 2017-05-22 10:54:54
    例如我有一张1024*768的图片,能否让它在页面上显示全屏,无论电脑分辨率是1024*768还是1440*900,我都想让这张图片全屏如何实现? 1、如果楼主只是将其当做一张图片显示,可以通过css控制,如img{width:100%;...
  • layer UI 在弹出的窗口下如何查看图片时,图片不受窗口的限制,能遮盖窗口, 全屏显示。目前遇到的问题是查看图片图片只是在窗口的范围下面看,这样 图片看不全,不符合设计要求
  • 全屏显示背景图片,在某些时候非常需要,那么如何实现浏览器全屏显示呢?下面有个不错的示例,感兴趣的朋友可以参考下
  • 以Path为代表的,展示了这种背景图模糊并全屏显示的方法,而且会根据屏幕分辨率放大缩小。这种效果应该怎么实现呢?高斯模糊是PS、FW图片处理工具搞的。全屏显示的方法1:使用CSS.bg {background-image:url(scale....
  • 最近在做H5开发,遇到了问题,UI给了1920px*600px的图片,但是图片在不同的分辨率下尤其是小屏幕显示总会出现问题,图片被莫名的压缩了,为了解决这个问题,谷歌了好久找到了解决方案。解决方案 用div进行布局然后...
  • 小弟初学java,现在想通过java实现简单的图片动态显示。具体思路是这样的:应用根据接接收到的数字,找到资源中的图片并且全屏显示。 请问该如何实现?用到什么样的类库和方法?重点是如何实现全屏显示功能?谢谢
  • android 如何实现在手机屏幕里全屏显示图片(这张图片是网络请求下来的,为固定尺寸1124*640),怎么样在手机上显示不变形失真,而且是全屏显示,谁知道?
  • <div><p>求指教: 如果加载本地图片,开启缩放后如何让他全屏显示图片,类似微信那种?</p><p>该提问来源于开源项目:panpf/sketch</p></div>
  • 如何让程序在Nexus上全屏显示

    千次阅读 2016-03-24 23:13:41
    图片来源 http://www.pcpop.com/view/1/1157/1157137_1.shtml?r=09092235 这可能是我最短的一篇博客了哈 哈 哈~ 从网上盗的一长Nexus 6P运行程序的截图,是不是看起来还是不错,但是有个问题就是底部的 Navigation ...
  • imageview中图片如何全屏控制

    千次阅读 2014-04-29 16:11:12
    ImageView的Scaletype决定了图片在View上显示时的样子,如进行何种比例的缩放,及显示图片的整体还是部分,等等。 设置的方式包括: 1. 在layout xml中定义android:scaleType="CENTER" 2. 或在代码中调用...
  • (Focusky动画演示大师简称“FS软件”...其次,路径框要放在图片范围内,即路径框要小于图片,这样 就能实现所见即所得了。 【▲图2】 温馨提示:如果最后输出的是视频,那么帧的比例应和视频的分辨率一致。 36...
  • 各位大神请教一下,怎样在webview中全屏显示网页中的某一个div内容,只针对这个div显示,内容样式都要一样,现在是在做显示天气,因为以后业务很多,需要要求这样实现,暂不考虑自己通过接口获取数据,自己做界面,...
  • 我写的js很简单,实现了点击隐藏左边菜单功能,但右边内容区域总是不能全屏显示,有一块空白仍是调用前的div,这种隐藏有何用?求高手指点如何实现内容里面的表格也能自动全屏。就像最后两张图片中的效果一样,谢谢...
  • 网上多为resize拉伸,这个可以用于不太精细的图片的满屏显示。但是对于启动页或者闪屏页这种各个细节都不一致的满屏图片,就不太适用了。 解决方法还是比较简单,就是让美工同时制作两张不同比例的图片,分别对应非...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 162
精华内容 64
关键字:

如何图片全屏显示