精华内容
下载资源
问答
  • html设置背景图片自适应

    万次阅读 多人点赞 2019-04-25 17:53:47
    在网上找了很久,终于在一个百度问答里找到正确答案,记录下来,方便以后使用。 在<body>中设置: <body background="images\bg.jpg" style=" background-repeat:no-repeat ;...第一行是图片...

    在网上找了很久,终于在一个百度问答里找到正确答案,记录下来,方便以后使用。
    <body>中设置:

    <body background="images\bg.jpg"
    style=" background-repeat:no-repeat ;
    background-size:100% 100%;
    background-attachment: fixed;"
    >
    

    第一行是图片url
    第二行是背景图片不重复
    第三行是达到窗口的百分百比例
    第四行是图片固定,随着页面滚动而移动

    展开全文
  • 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形...

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

    以下是用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 class="wrapper"> <!--背景图片--> <div id="web_bg" style="background-image: url(./img/bg.jpg);"></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;

    这个的目的是让整个div在HTML页面中各个层级的下方,正常情况下,第一个创建的层级z-index的值是0,所以如果我们这里写成-1也可以实现,不过这里写-10是确保整个div在最下面,因为如果页面中层级太多了,有的时候用-1不一定在最下面,但如果写成-100这样大数字的也没有什么意义。用index:-10 以此能达到看上去像背景图片,其实是一个最普通的div,只是层级关系变了,才让人看上去看是背景图片。

      background-repeat: no-repeat;

    上面这个是背景不要重复

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

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

      background-position: center 0;

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

    转载:https://www.jianshu.com/p/5480cd1a5d89

    转载于:https://www.cnblogs.com/max-hou/p/10845457.html

    展开全文
  • web界面图片自适应解决方案

    千次阅读 2014-12-01 11:23:50
    做前端页面时,图片自适应问题总是很头疼,这里首先说明一下碰到的问题:在前期做项目中的过程中,刚开始并没有考虑到浏览器的版本兼容性问题,默认的用chrome开发,于是对于登陆页面背景图片,用了如下写法: ...

    更多2019年的技术文章,欢迎关注我的微信公众号:码不停蹄的小鼠松(微信号:busy_squirrel),也可扫下方二维码关注获取最新文章哦~

    做前端页面时,图片自适应问题总是很头疼,这里首先说明一下碰到的问题:在前期做项目中的过程中,刚开始并没有考虑到浏览器的版本兼容性问题,默认的用chrome开发,于是对于登陆页面的背景图片,用了如下写法:

     

    <div id="Layer1" style="position: absolute; width: 100%; height: 100%; z-index: -1">
    		<img src="/EVM/img/sac_login_backgroundImg.jpg" height="100%"
    			width="100%" />
    	</div>


    在chrome中的效果还可以:

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    但是在IE8中的显示效果就不怎么好了:

     

     

     

     

     

     

     

     

     

     

     

     

    网上有人给出了CSS + JS的方式,点击这里查看原网址。下面给出示例代码:

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>窗口背景变化</title>
    <style type="text/css">  
    *{margin:0;padding:0;}
    #bg{
    position:absolute;
    top:0px;
    left:0px;
    z-index:-999;
    }
    </style>
    </head>
    <body>
    <div id="bg"><img src=" http://www.wallcoo.com/ad/Korea_Besti_Belli/images/jihyun-bestibelli06.jpg" alt="HIGH"></div>
    <input type="text" id="msg" name="msg" size="50"/>
    <script type="text/javascript">
     window.onresize = window.onload = function(){
         var w,h
         if(!!(window.attachEvent && !window.opera))
         {
          h = document.documentElement.clientHeight;
          w = document.documentElement.clientWidth;
         }else{
          h = window.innerHeight;
          w = window.innerWidth;
         }
      document.getElementById('msg').value  ='窗口大小:' + 'width:' + w + '; height:'+h;
        var bgImg = document.getElementById('bg').getElementsByTagName('img')[0];
        bgImg.width = (w - 5);
        bgImg.height= (h-5) ;  
              
       }   
    </script>
    </body>
    </html>

    这种方法可以很好的解决图形的自适应问题,但是若加入JQuery的东西,对于IE8还是没有效果。暂时还没有测试IE9和IE10的兼容性。

     

    更多2019年的技术文章,欢迎关注我的微信公众号:码不停蹄的小鼠松(微信号:busy_squirrel),也可扫下方二维码关注获取最新文章哦~

     

     

    展开全文
  • 原标题:自适应设计:自适应图片的完整教程 在这篇文章中我们将学习关于自适应图片:一种可以在不同的屏幕尺寸和分辨率的设备上都能良好工作以及其他特性的图片,并且看看HTML提供了什么工具来帮助实现它们。自适应...

    原标题:自适应设计:自适应图片的完整教程

    68afc0622e642bd8690b728eafda0f43.png

    在这篇文章中我们将学习关于自适应图片:一种可以在不同的屏幕尺寸和分辨率的设备上都能良好工作以及其他特性的图片,并且看看HTML提供了什么工具来帮助实现它们。自适应图片仅仅只是自适应网站设计的一部分,为您奠定了自适应网页设计的良好基础。

    为什么要用自适应的图片?

    让我们来看一个典型的场景。一个典型的网站可能会有一张页首图片,这让访问者看起来感到愉快。图片下面可能会添加一些内容图像。页首图像的跨度可能是整个页首的宽度。而内容图像会适应内容纵列的某处。此处有个简单的例子:

    a40427ddcbdb383371069b31b8ec0d54.png

    这个网页在宽屏设备上表现良好,例如笔记本电脑或台式机(你可以查看在线演示并且在GitHub上查看源代码)。我们不会在这一节课中讨论CSS,除了下面提到的那些:

    正文内容被设置的最大宽度为1200像素——在高于该宽度的可视窗口中,正文保持在1200像素,并将其本身置于可用空间的中间。在该宽度以下的可视窗口中,正文将保持在可视窗口宽度的100%。

    页眉图像被设置为使其中心始终位于页眉的中心,无论页眉的宽度是多少。所以如果网站被显示在窄屏上,图片中心的重要细节(里面的人)仍然可以看到,而两边超出的部分都消失了。它的高度是200px。

    内容图片已经被设置为如果body元素比图像更小,图像就开始缩小,这样图像总是在正文里,而不是溢出正文。

    然而,当你尝试在一个狭小的屏幕设备上查看本页面时,问题就会产生。网页的页眉看起来还可以,但是页眉这张图片占据了屏幕的一大部分的高度,在这个尺寸下,你很难看到在第一张图片内容里的人。

    bcc352e7a1a921aae0d133a0adbc2b03.png

    一个改进的方法是,当网站在狭窄的屏幕上观看时,显示一幅图片的包含了重要细节的裁剪版本,第二个被裁剪的图片会在像平板电脑这样的中等宽度的屏幕设备上显示,这就是众所周知的美术设计问题(art direction problem)。

    另外,如果是在小屏手机屏幕上显示网页,那么没有必要在网页上嵌入这样大的图片。这被称之为分辨率切换问题(resolution switching problem)。位图有固定数量的像素宽,固定数量的像素高,与矢量图外观相同,但本质不同。如果显示尺寸大于原始尺寸,一张自身较小的位图看起来会有颗粒感(矢量图则不会)。

    相反,没有必要在比图片实际尺寸小的屏幕上显示一张大图,这样做会浪费带宽——当可以在设备上使用小图像时,手机用户尤其不愿意因为下载用于桌面的大图像而浪费带宽。理想的情况是当访问网站时依靠不同的设备来提供不同的分辨率图片和不同尺寸的图片。

    让事情变得复杂的是,有些设备有很高的分辨率,为了显示的更出色,可能需要超出你预料的更大的图像。这从本质上是一样的问题,但在环境上有一些不同。

    你可能会认为矢量图形能解决这些问题,在某种程度上是这样的——它们无论是文件大小还是比例都合适,无论在哪里你都应该尽可能的使用它们。然而,它们并不适合所有的图片类型,虽然在简单图形、图案、界面元素等方面较好,但如果是有大量的细节的照片,创建矢量图像会变得非常复杂。像JPEG格式这样的位图会更适合上面例子中的图像。

    当web第一次出现时,这样的问题并不存在,在上世纪90年代中期,仅仅可以通过笔记本电脑和台式机来浏览web页面,所以浏览器开发者和规范制定者甚至没有想到要实现这种解决方式(响应式开发)。最近应用的响应式图像技术,通过让浏览器提供多个图像文件来解决上述问题,比如使用相同显示效果的图片但包含多个不同的分辨率(分辨率切换),或者使用不同的图片以适应不同的空间分配(美术设计)。

    注意: 在这篇文章中讨论的新特性 — srcset/sizes/ — 都已经被新版本的现代浏览器和移动浏览器所支持(包括Edge,而不是IE)。

    怎样创建自适应的图片?

    在这一部分中,我们将看看上面说明的两个问题,并且展示怎样用HTML的响应式图片来解决这些问题。需要注意的是,如以上示例所示,在本节中我们将专注于HTML的 ,但网站页眉的图片仅是装饰性的,实际上应该要用CSS的背景图片来实现。CSS是比HTML更好的响应式设计的工具,我们会在未来的CSS模块中讨论。

    分辨率切换:不同的尺寸

    那么,我们想要用分辨率切换解决什么问题呢?我们想要显示相同的图片内容,仅仅依据设备来显示更大或更小的图片——这是我们在示例中使用第二个内容图像的情况。标准的元素传统上仅仅让你给浏览器指定唯一的资源文件。

    Elva dressed as a fairy

    我们可以使用两个新的属性——srcset 和 sizes——来提供更多额外的资源图像和提示,帮助浏览器选择正确的一个资源。你可以看到 responsive.html 的例子,也可以在GitHub上看到源码:

    Elva dressed as a fairy

    srcset和sizes属性看起来很复杂,但是如果你按照上图所示进行格式化,那么他们并不是很难理解,每一行有不同的属性值。每个值都包含逗号分隔的列表。列表的每一部分由三个子部分组成。让我们来看看现在的每一个内容:

    srcset定义了我们允许浏览器选择的图像集,以及每个图像的大小。在每个逗号之前,我们写:

    一个文件名(elva-fairy-480w.jpg.)

    一个空格

    图像的固有宽度(以像素为单位)(480w)——注意到这里使用w单位,而不是你预计的px。这是图像的真实大小,可以通过检查你电脑上的图片文件找到(例如,在Mac上,你可以在Finder上选择这个图像,然后按 Cmd + I 来显示信息)。

    sizes定义了一组媒体条件(例如屏幕宽度)并且指明当某些媒体条件为真时,什么样的图片尺寸是最佳选择—我们在之前已经讨论了一些提示。在这种情况下,在每个逗号之前,我们写:

    一个媒体条件((max-width:480px))——你会在 CSS topic中学到更多的。但是现在我们仅仅讨论的是媒体条件描述了屏幕可能处于的状态。在这里,我们说“当可视窗口的宽度是480像素或更少”。

    一个空格

    当媒体条件为真时,图像将填充的槽的宽度(440px)

    注意: 对于槽的宽度,你也许会提供一个固定值 (px, em) 或者是一个相对于视口的长度(vw),但不是百分比。你也许已经注意到最后一个槽的宽度是没有媒体条件的,它是默认的,当没有任何一个媒体条件为真时,它就会生效。 当浏览器成功匹配第一个媒体条件的时候,剩下所有的东西都会被忽略,所以要注意媒体条件的顺序。

    所以,有了这些属性,浏览器会:

    查看设备宽度

    检查sizes列表中哪个媒体条件是第一个为真

    查看给予该媒体查询的槽大小

    加载srcset列表中引用的最接近所选的槽大小的图像

    就是这样!所以在这里,如果支持浏览器以视窗宽度为480px来加载页面,那么(max-width: 480px)的媒体条件为真,因此440px的槽会被选择,所以elva-fairy-480w.jpg将加载,因为它的的固定宽度(480w)最接近于440px。800px的照片大小为128KB而480px版本仅有63KB大小—节省了65KB。现在想象一下,如果这是一个有很多图片的页面。使用这种技术会节省移动端用户的大量带宽。

    老旧的浏览器不支持这些特性,它会忽略这些特征。并继续正常加载 src属性引用的图像文件。

    注意: 在 HTML 文件中的

    标签里, 你将会找到这一行代码 : 这行代码会强制地让手机浏览器采用它们真实可视窗口的宽度来加载网页(有些手机浏览器会提供不真实的可视窗口宽度, 然后加载比浏览器真实可视窗口的宽度大的宽度的网页,然后再缩小加载的页面,这样的做法对响应式图片或其他设计,没有任何帮助。我们会在未来的模块教给你更多关于这方面的知识)。

    一些有用的开发工具

    这里有一些在浏览器中的非常实用的开发者工具用来帮助制定重要的槽宽度,以及其他你可能会用到的场景。当我在设置槽宽度的时候,我先加载了示例中的无响应的版本(not-responsive.html),然后进入响应设计视图 (Tools > Web Developer > Responsive Design View),这个工具允许你在不同设备的屏幕宽度场景下查看网页的布局。

    我设置我的视图宽度为 320px,然后再改为 480px;每一次宽度的改变我就进入DOM 检查 ,点击我们感兴趣的 元素,然后在显示屏右侧的 Box Model 视图选项卡中查看它的大小。 你应该会看到,这种无响应式的做法会让你的图片在不同屏幕宽度下有着固定的宽度。

    6a0fe6119c81c293c6c0bbb750a8d9d9.png

    接着, 你可以检查 srcset 是否正常工作,你需要将视图的宽度设置为你想要的,(比如,把宽度设置的比较小,让页面看起来比较狭窄),打开网络检查(Tools > Web Developer > Network),然后重新加载页面。网络检查工具会给你一个列表,里面的文件都是已经被下载来构造网页的。然后你可以在这里看到哪个图像文件被下载了。

    注意: 在 Chrome 中测试时,通过如下方式禁用缓存:打开 DevTools ,并选中 Settings > preferences > Network下Disable cache的选择框。否则,Chrome 会优先选择缓存图片而不是恰好适配的那个。

    96e3924864449c8967c6698eed37cb57.png

    分辨率切换: 相同的尺寸, 不同的分辨率

    如果你支持多种分辨率显示,但希望每个人在屏幕上看到的图片的实际尺寸是相同的,你可以让浏览器通过srcset和x语法结合——一种更简单的语法——而不用sizes,来选择适当分辨率的图片。你可以看一个例子srcset-resolutions.html:

    Elva dressed as a fairy

    36e49bad105c5addd225864b76a33f15.png

    在这个例子中,下面的CSS会应用在图片上,所以它的宽度在屏幕上是320像素(也称作CSS像素):

    img { width: 320px; }

    在这种情况下,sizes并不需要——浏览器只是计算出正在显示的显示器的分辨率,然后提供srcset引用的最适合的图像。因此,如果访问页面的设备具有标准/低分辨率显示,一个设备像素表示一个CSS像素,elva-fairy-320w.jpg会被加载(1x 是默认值,所以你不需要写出来)。如果设备有高分辨率,两个或更多的设备像素表示一个CSS像素,elva-fairy-640w.jpg 会被加载。640px的图像大小为93KB,320px的图像的大小仅仅有39KB。

    美术设计

    回顾一下,美术设计问题涉及要更改显示的图像以适应不同的图像显示尺寸。例如,如果在桌面浏览器上的一个网站上显示一张大的、横向的照片,照片中央有个人,然后当在移动端浏览器上浏览这个网站时,照片会缩小,这时照片上的人会变得非常小,看起来会很糟糕。这种情况可能在移动端显示一个更小的肖像图会更好,这样人物的大小看起来更合适。元素允许我们这样实现。

    回到我们最初的例子 not-responsive.html ,我们有一张图片需要美术设计:

    Chris standing up holding his daughter Elva

    让我们改用 !就像和,素包含了一些元素,它使浏览器在不同资源间做出选择,紧跟着的是最重要的元素。responsive.html 的代码如下:

    Chris standing up holding his daughter Elva

    元素包含一个media属性,这一属性包含一个媒体条件——就像第一个srcset例子,这些条件来决定哪张图片会显示——第一个条件返回真,那么就会显示这张图片。在这种情况下,如果视窗的宽度为799px或更少,第一个元素的图片就会显示。如果视窗的宽度是800px或更大,就显示第二张图片。

    srcset属性包含要显示图片的路径。请注意,正如我们在上面看到的那样,可以使用引用多个图像的srcset属性,还有sizes属性。所以你可以通过一个 元素提供多个图片,不过也可以给每个图片提供多分辨率的图片。实际上,你可能不想经常做这样的事情。

    在任何情况下,你都必须在 之前正确提供一个元素以及它的src和alt属性,否则不会有图片显示。当媒体条件都不返回真的时候(你可以在这个例子中删除第二个 元素),它会提供图片;如果浏览器不支持 元素时,它可以作为后备方案。

    这样的代码允许我们在宽屏和窄屏上都能显示合适的图片,像下面展示的一样:

    0ab010e74f555eba0db28be32fedf446.png

    ec21d7338c0dc5e8c325353241dbd31a.png

    注意: 你应该仅仅当在美术设计场景下使用media属性;当你使用media时,不要在sizes属性中也提供媒体条件。

    为什么我们不能使用 CSS 或 JavaScript 来做到这一效果?

    当浏览器开始加载一个页面, 它会在主解析器开始加载和解析页面的 CSS 和 JavaScript 之前先下载 (预加载) 任意的图片。这是一个非常有用的技巧,平均下来减少了页面加载时间的20%。但是, 这对响应式图片一点帮助都没有, 所以需要类似 srcset的实现方法。因为你不能先加载好 元素后, 再用 JavaScript 检测可视窗口的宽度,如果觉得大小不合适,再动态地加载小的图片替换已经加载好的图片,这样的话, 原始的图像已经被加载了, 然后你又加载了小的图像, 这样的做法对于响应式图像的理念来说,是很糟糕的。

    大胆的使用现代图像格式

    有很多令人激动的新图像格式(例如WebP和JPEG-2000)可以在有高质量的同时有较低的文件大小。然而,浏览器对其的支持参差不齐。

    让我们能继续满足老式浏览器的需要。你可以在type属性中提供MIME类型,这样浏览器就能立即拒绝其不支持的文件类型:

    regular pyramid built from four equilateral triangles

    不要使用media属性,除非你也需要美术设计。

    在 元素中,你只可以引用在type中声明的文件类型。

    像之前一样,如果必要,你可以在srcset和sizes中使用逗号分割的列表。

    主动学习:实现属于你的响应式图像

    在这次主动学习中,我们希望你变得勇敢和自力更生……尽量的。我们希望你通过使用来实现自己美术设计上的宽/窄屏显示适配,以及使用 srcset切换不同的分辨率。

    写一些简单 HTML 来包含你的代码(如果你喜欢,也可以使用 not-responsive.html 作为起点)。

    找一张漂亮的宽屏风景图像,其中需要包含一些细节。使用图像编辑器创建一个网页大小的版本。然后裁剪一下,显示一个更小的部分,其中包含放大的细节, 然后创建第二张图片 (差不多 480px 宽度比较好。)

    使用 元素来实现艺术图片切换器!

    创建不同大小的多张图片, 每个图片的图像都是一样的。

    使用 srcset/size 来创建一个分辨率切换器示例, 可以在不同的分辨率的情况下,提供相同尺寸的图像, 或者在不同的视图大小的情况下,提供不同尺寸大小的图像。

    注意: 使用浏览器开发工具来帮助你工作时可以得到你需要的视图大小,就像上文提到的。

    总结

    这章节中充满了响应式图像 — 我们希望你学习新技术的过程是享受的。概括来说,有两个不同的问题,文章中我们一直在讨论:

    美术设计:当你想为不同布局提供不同剪裁的图片——比如在桌面布局上显示完整的、横向图片,而在手机布局上显示一张剪裁过的、突出重点的纵向图片,可以用 元素来实现。

    分辨率切换:当你想要为窄屏提供更小的图片时,因为小屏幕不需要像桌面端显示那么大的图片;以及你想为高/低分辨率屏幕提供不同分辨率的图片时,都可以通过 vector graphics (SVG images)、 srcset 以及 sizes 属性来实现。

    责任编辑:

    展开全文
  • <body style="overflow:hidden;"> <div class="wrapper">...--背景图片--> <div id="web_bg" style="background-image: url(/images/welcome.png);background-size:100% ...
  • CSS web页面自适应屏幕

    千次阅读 2014-08-04 16:08:14
    今天面对如此众多的PC浏览器,手机浏览器,不同屏幕大小,web页面不仅要适应浏览器兼容,还要适应屏幕大小。有可能为了移动端,再从新做一套页面,很麻分。  下面我来说说通过注意使用CSS的方式,在一定程度上...
  • CSS实现网页背景图片自适应全屏

    千次阅读 2019-03-25 16:52:43
    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形...
  • 题外话:看完你会忍不住点个赞的,点赞再看,养成习惯 ⭐ 推荐阅读: web前端面试宝典(一) web前端面试宝典(二) 前端工程师,实际工作中的开发流程? 自己的准备工作分享:前端知识点总结 2021前端面试题精选 ...
  • html背景图片自适应

    千次阅读 2014-08-08 18:08:04
    只需将以下代码复制到页面标签下面即可实现,当然了如果你的大图超大放到空间里面下载很慢,你可以把图片放到百度开发中心BAE里面去,就如我站现在的这些大图都是放在BAE里面托管的。 如果使用加入此代码后,请...
  • 网页背景图片大小拖动自适应 这种方式能够随着网页的拖动而滑动,不会遮挡输入框的内容 <div id="web_bg" style="position:absolute; width:100%; height:100%; z-index:-1"> <img style="position:fixed...
  • 简单大图,元素空或者 一般简单大图可考虑 元素,设其宽度100%就可以了。 如果想通过background来设置,需要设置高度,算下长宽比,如果是10:6的话,则可以设置...思考你如果将一个web页面设置位宽度320是个什么样子)
  • 之前在加前端背景时一直用<body background="xxx">的形式,但是用这种形式,背景会随着网页的布局大小而变化,显得不美观,例如: 这里就不能正常显示图片的尺寸了: 图片随着网页的大小而变化,很难看: ...
  • 实现背景图全屏自适应

    千次阅读 2018-07-17 14:36:29
    实现自适应全屏背景图 HTML: title css: web_bg{ position:fixed; top: 0; left: 0; width:100%; height:100%; min-width: 1000px; z-index:-10; zoom: 1; ...
  • HTML代码 <body id="body"> <div class="info-wrapper"> <div class="content"> </div> </div> </div> CSS代码 body{  font-size: 16px;...
  • 图片自适应屏幕大小最简单的方法,保证管用,你把那个图片写在div里面的背景里,也就是background:url(…/img/1.jpg) center no-repeat; 这样就能够自适应屏幕大小了,而且不会出现横向的滚动条 首先是设置...
  • 背景图像进行拉伸,以使背景图像恰好水平复制四次。 background-size 神奇之处就在于它的自我调整能力。我以前常常担心当浏览器窗口发生变化,当有resize事件发生时,页面会出现不可预测的变化。但 background-...
  • 背景自适应

    2018-09-07 14:12:34
    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形...
  • web开发自适应

    千次阅读 2015-11-20 18:18:27
    自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备)。 开发者们都知道在高端智能手机系统中有两种应用程序:...
  • 背景自适应铺满窗口

    千次阅读 2018-11-08 21:52:13
    背景自适应 &amp;nbsp;&amp;nbsp;&amp;nbsp;直接上代码 这是html页面 &amp;lt;body id=&quot;body&quot;&amp;gt; ... &amp;lt;/body&amp;gt; css文件如下: #body...
  • 方法一:在css中使用@media .../*页面宽度大于800、小于1200时,显示绿色背景*/ @media (min-width : 800px) and (max-width : 1200px) { body{ background: green; } } /*页面大于1200px时显示cadetbl
  • html页面图片和文字实现自适应

    千次阅读 2015-03-27 11:38:29
    文字自适应在html页面加入 图片自适应加入 img{width:100%}
  • 页面上除了输入框和按钮外,就是背景图片。其中的输入框的位置都用的是相对位置。但IE或分辨率调整后,仍会发生输入框和背景图错位的情况。请教一下大家,如何才能让背景图片也随IE和分辨率的变化而变化呢?? 请...
  • 1. 背景视频 Web 页面的既有实现方式 国外有一个很好的网站 「Coverr」 ,提供了完善的教程和视频资源,帮助前端开发者构建酷炫的背景视频主页,网站效果示例如下图所示:   教程如下所示:   从图中以及我的实践...
  • 1、使用meta标签:viewportH5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。viewport 是用户网页...
  • 要使图片能够自适应显示,我们一般可以通过设置CSS样式,让图片作为父元素的背景图片,再设置相关属性来实现。下面我们来看一下使用css设置图片自适应的方法。css设置图片自适应示例:HTML代码:titlecss代码:#web_...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,966
精华内容 4,386
关键字:

web背景图片页面自适应