精华内容
下载资源
问答
  • 一张清晰漂亮的背景图片能给网页加分不少...以下是用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

    展开全文
  • 展开全部1:一个很e69da5e887aa...background-size 属性可以我们之前的希望成真。而且这个属性在firefox,chrome,以及ie9上都可以使用。2:背景图尺寸(数值表示方式)代码如...

    展开全部

    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中可以用,实现背景拉伸铺满整个浏览器,但其它的浏览器不支持。

    展开全文
  • background-size 属性可以我们之前的希望成真。而且这个属性在firefox,chrome,以及ie9上都可以使用。2:背景图尺寸(数值表示方式)代码如下:#background-size{ background-size:200px 100px; }3:背景图尺寸(百分比...

    1:一个很小的条状图,通过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; }

    ce158d668b69ef383d4179e80677b79f.png

    扩展资料:

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

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

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

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

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

    展开全文
  • 在ScrollView中嵌套Linearlayout,在linearlayout布局中有很多的ImageView控件,然后在代码中添加帧动画,imageview指定大小时(比如layout_width=“50dp”),图片可以正常显示,但是...如何做才可以将图片全屏显示
  • css 如何让图片全屏的问题

    千次阅读 2017-05-22 10:54:54
    css 如何让图片全屏的问题 例如我有一张1024*768的图片,能否让它在页面上显示全屏,无论电脑分辨率是1024*768还是1440*900,我都想让这张图片全屏,如何实现? 1、如果楼主只是将其当做一张图片显示,可以通过css...
  • 全屏显示在界面中,因为后续还需要在图片上画直线并获取直线两点的色彩信息,所以采用了opencv的方式,求大神告知代码中哪里错了,怎么改才能让图片全屏显示(并不要求和界面尺寸大小一致)。代码如下:#!/usr/bin...
  • layer UI 在弹出的窗口下如何查看图片时,图片不受窗口的限制,能遮盖窗口, 全屏显示。目前遇到的问题是查看图片图片只是在窗口的范围下面看,这样 图片看不全,不符合设计要求
  • 如何让程序在Nexus上全屏显示

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

    万次阅读 2013-05-25 08:33:23
    css 如何让图片全屏的问题 例如我有一张1024*768的图片,能否让它在页面上显示全屏,无论电脑分辨率是1024*768还是1440*900,我都想让这张图片全屏,如何实现? 1、如果楼主只是将其当做一张图片显示,可以通过...
  • 遇到的问题 最近在做H5开发,遇到了问题,UI给了1920px*600...用div进行布局然后把图片设置为div的背景图 设置如下属性,让图片居中,不重复,宽度100%,这是固定高度,让它从两边切。 background: url(../banner.jpg
  • <div><p>求指教: 如果加载本地图片,开启缩放后如何让全屏显示图片,类似微信那种?</p><p>该提问来源于开源项目:panpf/sketch</p></div>
  • 一个真实的场景:用户上传了一张高清图片,这张图片的展示媒介包括27英寸的iMac、15寸的Macbook Pro、各种尺寸的平板、各种分辨率的Windows本、各种尺寸和DPR的手机,如何保证图片在不同的媒介上都足够高清、图片...
  • 我们在浏览网站的时候发现,很多网站的banner图片都是全屏宽度。这种图片都是在不同分辨率下都是显示图片的中间部分,这里我们介绍两种方式,第一种就是常见的方式,用定位我简单定义为三部曲: - 包裹图片的...
  • 我们在浏览网站的时候发现,很多网站的banner图片都是全屏宽度。这种图片都是在不同分辨率下都是显示图片的中间部分,这里我们介绍两种方式, 第一种就是常见的方式,用定位 我简单定义为三部曲: - 包裹图片的...
  • 网上多为resize拉伸,这个可以用于不太精细的图片的满屏...不同尺寸的屏幕分别显示不同比例的图片即可。 附上两者的比例尺 非全面屏的宽高比约为:0.562 全面屏的宽高比约为: 0.462 祝大家新年码运亨通。 ...
  • 这里只对其做一个简要介绍,之所以有此一文,也只为记录在开发过程中曾使用到Matrix解决了一个我曾比较头疼的问题,就是不同尺寸的图形,如何在不同尺寸的屏幕上全屏且完整的显示,具体的解决方式就是就
  • js背景图片按比例充满全屏

    万次阅读 2014-07-24 10:57:57
    背景: Chrome中页面背景图片:background-size:cover;可以按比例放大图片而无损画质。 问题是实际在pc端测试时不知何故,图片只能显示原大小,其他设置无法...那么如何让图片充满全屏,又对背景图片画质无损呢?
  • 【css实践】全屏实现背景图片

    千次阅读 2015-05-07 16:21:43
    今天做项目的时候发现一个大bug,平时表现良好的背景图片“偏移”(队友这么描述),只是因为我把jsp改成了html,然后研究了下如何让背景图片全屏无压缩显示,记录如下: (1)加一个div包裹住 (2)清除...
  • 或者用其他方式让图片能完美的显示出来 。 刚才试了一下。 在UI界面去手动创建添加图片是可以的。 但是用代码添加就出现放的很大的问题。 UIImage *image = [UIImage imageNamed:@"img1.jpg" ]; UIImageView...
  • JAVA全屏

    2011-06-12 23:11:00
    像许多软件中的打印预览功能,还有某些文本编辑器中为了获得更大的编辑画面,也用到了全屏幕模式,如果你有兴趣写一个像ACDSee这样的软件,使用全屏幕模式可以用户看到更大的图片画面。 如何使用全屏幕模式? ...
  • 像许多软件中的打印预览功能,还有某些文本编辑器中为了获得更大的编辑画面,也用到了全屏幕模式,如果你有兴趣写一个像ACDSee这样的软件,使用全屏幕模式可以用户看到更大的图片画面。如何使用全屏幕模式?关键是...
  • 响应式Web设 计(ResponsiveWebdesign)的理念是页面的设计与开发应当根据设备环境(屏幕尺寸、屏幕...无论用户正在使用 pc、平板电脑,或者手机,无论是全屏显示还是非全屏的情况,无论屏幕是横向还是竖向,页面都应该...
  • Awt 全屏设置

    2013-04-16 16:23:05
    像许多软件中的打印预览功能,还有某些文本编辑器中为了获得更大的编辑画面,也用到了全屏幕模式,如果你有兴趣写一个像ACDSee这样的软件,使用全屏幕模式可以用户看到更大的图片画面。  如何使用全屏幕模式...
  • JAVA的全屏模式

    2019-10-02 23:31:39
    像许多软件中的打印预览功能,还有某些文本编辑器中为了获得更大的编辑画面,也用到了全屏幕模式,如果你有兴趣写一个像ACDSee这样的软件,使用全屏幕模式可以用户看到更大的图片画面。  如何使用全屏幕模式...
  • 像许多软件中的打印预览功效,还有某些文本编辑 器中为了获得更大的编辑 画面,也用到了Swing全屏幕模式,如果你有兴趣 写一个像ACDSee这样的软件,应用 Swing全屏幕模式可以用户看到更大的图片画面。如何应用 ...

空空如也

空空如也

1 2 3 4
收藏数 61
精华内容 24
关键字:

如何让图片全屏显示