精华内容
下载资源
问答
  • html设置背景图片全屏
    千次阅读
    2018-10-20 15:49:39

    【HTML】设置全屏图片

    CSS页面代码:

    html,body{
                width:100%;
                height:100%
            }
            body{
                font-family: "华文细黑";
                background:url("https://ss3.bdstatic.com/lPoZeXSm1A5BphGlnYG/skin/2.jpg?2") no-repeat;
                background-size: 100%;
            }

     

    更多相关内容
  • html怎么设置背景图片全屏平铺?

    千次阅读 2021-06-09 14:37:38
    html怎么设置背景图片全屏平铺?1、新建一个html文档。2、设置一下HTML的框架,然后把图片设置在同一个文件夹里面。3、加入,这样可以有样式设置。4、因为背景设置在主体,所以还要定义为body{}。5、background-...

    5268f80b9b1e01f982625ef6fac83ca1.png

    6987fdbdbdc7610e4430c572ce89de62.png

    html怎么设置背景图片全屏平铺?

    1、新建一个html文档。

    149709f940371469a21b495719bade93.png

    2、设置一下HTML的框架,然后把图片设置在同一个文件夹里面。

    2ae4c80aef3d9ceac23199e8fc85bfb4.png

    09fdc1fd52104e33c7828ea791a821e2.png

    3、加入,这样可以有样式设置。

    c7759ed361930370ae2aeeb69698053c.png

    4、因为背景设置在主体,所以还要定义为body{}。

    3e066c8e53f93bb370f6b77a6c3f74ce.png

    5、background-image:url(图片),这个是添加图片的意思。

    6dca21e76595bb5308e614aa3b352303.png

    73530e63636716c1066f9c16438d8d3f.png

    6、然后我们需要加入background-repeat:repeat-x;这个时候就会横向平铺。

    d21090e73a0c9f9b958692f21f903ee3.png

    2a4a5695c64af32b66e827abda320bc5.png

    7、background-repeat:no-repeat;这样就可以不重复平铺。

    31685c257aa5d92c0dba351897576b3a.png

    7877a0a0efb798165fd07ff6de10792a.png

    8、background-repeat:repeat-y;这个指令是纵向平铺。

    a53cf1868b36c5d0a599b9fbd5fd2904.png

    6744a34b7995bc610e2120852e82d282.png

    9、background-repeat:repeat;这样则是全屏平铺。

    30a386d142416c4397defc77ede72bc9.png

    045e1e2873aa2ce4d74e92bf8de419f1.png

    推荐教程: 《HTML教程》

    展开全文
  • JS图片背景全屏代码

    2021-04-09 16:00:41
    JS图片背景全屏代码是一款改变浏览器大小后需刷新查看全屏效果,兼容主流浏览器,含IE6。
  • HTML 全屏背景的方法

    千次阅读 2021-06-11 17:27:29
    (注:一下内容是自己通过网络整理出来的,并非完全自己写的)全屏背景是当下比较流行的一种网页设计风格,而具体的实现这样的全屏背景无外乎基本就两种方法,一种的通过CSS去实现的(CSS3.0为我们提供了更为丰富的CSS...

    (注:一下内容是自己通过网络整理出来的,并非完全自己写的)

    全屏背景是当下比较流行的一种网页设计风格,而具体的实现这样的全屏背景无外乎基本就两种方法,一种的通过CSS去实现的(CSS3.0为我们提供了更为丰富的CSS样式控制);另一种就是通过我们熟悉的javascript去实现,这里为了代码方便就直接使用jQuery了。既然提到jQuery,我们就可以想象既然我们能用jQuery写了,那网络上就一定有类似的写好的jQuery插件等着我们用了。

    方法一、利用CSS3.0样式新特性实现北京全屏(不支持ie6-8)

    html {

    background: url(images/bg.jpg) no-repeat center center fixed;

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    }

    或:

    html{

    background:url('background.jpg') no-repeat center center;

    min-height:100%;

    background-size:cover;

    }

    body{

    min-height:100%;

    }

    原理:将html及body设置为最小高度为100%,使用css3中的background-size:cover;将背景图片设置成封面全屏模式。

    兼容性:

    Safari 3+

    Chrome Whatever+

    IE 9+

    Opera 10+

    Firefox 3.6+

    方法二、使用jQuery实现

    HTML代码:

    CSS代码:

    #bg { position: fixed; top: 0; left: 0; }

    .bgwidth { width: 100%; }

    .bgheight { height: 100%; }

    jQuery代码:

    $(window).load(function() {

    var theWindow = $(window),

    $bg = $("#bg"),

    aspectRatio = $bg.width() / $bg.height();

    function resizeBg() {

    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {

    $bg

    .removeClass()

    .addClass('bgheight');

    } else {

    $bg

    .removeClass()

    .addClass('bgwidth');

    }

    }

    theWindow.resize(resizeBg).trigger("resize");

    });

    兼容性:

    IE7+

    任何桌面浏览器

    方法二、使用jQuery实现(附)【使用jQuery插件jQuery.fullBg】

    具体使用方法在插件地址中有,这里就不做详细说明了。

    First comes the plugin code:

    /**

    * jQuery.fullBg

    * Version 1.0

    * Copyright (c) 2010 c.bavota - http://bavotasan.com

    * Dual licensed under MIT and GPL.

    * Date: 02/23/2010

    **/

    (function($) {

    $.fn.fullBg = function(){

    var bgImg = $(this);

    function resizeImg() {

    var imgwidth = bgImg.width();

    var imgheight = bgImg.height();

    var winwidth = $(window).width();

    var winheight = $(window).height();

    var widthratio = winwidth / imgwidth;

    var heightratio = winheight / imgheight;

    var widthdiff = heightratio * imgwidth;

    var heightdiff = widthratio * imgheight;

    if(heightdiff>winheight) {

    bgImg.css({

    width: winwidth+'px',

    height: heightdiff+'px'

    });

    } else {

    bgImg.css({

    width: widthdiff+'px',

    height: winheight+'px'

    });

    }

    }

    resizeImg();

    $(window).resize(function() {

    resizeImg();

    });

    };

    })(jQuery)

    There is only a little CSS needed for this one:

    .fullBg {

    position: absolute;

    top: 0;

    left: 0;

    overflow: hidden;

    }

    #maincontent {

    position: absolute;

    top: 0;

    left: 0;

    z-index: 50;

    }

    If you want your background to stay fixed you can change the .fullBG CSS to this:

    .fullBg {

    position: fixed;

    top: 0;

    left: 0;

    overflow: hidden;

    }

    For the HTML markup, you can just add an image tag with an id or class, but you also need to add a div that contains your main content or else it won’t work properly. This is the bare minimum:

    To call the jQuery function, add this to the bottom of your web page, right before the closing body tag:

    $(window).load(function() {

    $("#background").fullBg();

    });

    Once again, this plugin is pretty simple so no options are available. It pretty much just does what it does.

    展开全文
  • css全屏背景图片设置,django加载图片路径详解 XML/HTML Code复制内容到剪贴板 <head>  <style type="text/css">  #bg { position:fixed;  top:0;  left:0;  width:100%;  height:100%;...
  • 代码片段: function removeThenAddClasses(domEl, removeClass, addClass) {  if (Array.isArray(domEl)) {  domEl.forEach(function (itemEl) { ... itemEl.classList.remove(removeClass);...
  • css 设置全屏背景图片

    2020-09-25 12:35:04
    HTML中,当我们设置背景图,只能采用是否重叠、居中、重叠方向这几个选项
  • 本文介绍了CSS实现网页背景图片自适应全屏的方法,分享给大家,具体如下: 网页背景自适应全屏.PNG 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率...
  • 不允许有白色底色产生,因为手机高度不一样错误的写法:加到div中结合图片设置min-height,但是页面不会回弹话不多说直接上代码终极方案html,body{width:100%;height:100%}再加一段body{font-family: "华文细黑";...

    用什么代码实现?不允许有白色底色产生,因为手机高度不一样

    错误的写法:加到div中结合图片设置min-height,但是页面不会回弹

    话不多说直接上代码

    终极方案

    html,body{

    width:100%;

    height:100%

    }

    再加一段

    body{

    font-family: "华文细黑";

    background:url("../img/Flyer-bg.png") no-repeat;

    background-size: 100%;

    }

    就是这么简单,但是好多人想不到。

    一个hack方案解决垂直剧中问题

    缓存

    .parent{

    width:200px;

    height: 200px;

    /* 以下属性垂直居中 */

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    margin: auto;

    background-color: #aaa;

    }

    111

    其他方案

    Document

    20171214085954_shouye5.jpg

    展开全文
  • html怎么设置背景图片全屏平铺?1、新建一个html文档。2、设置一下HTML的框架,然后把图片设置在同一个文件夹里面。3、加入,这样可以有样式设置。4、因为背景设置在主体,所以还要定义为body{}。5...
  • HTML设置body背景图片全屏显示

    万次阅读 2019-09-26 14:37:51
    在head标签中添加body属性设置: <head><style>body{background:url(timg1.jpg) top left;background-size:100%;}</style></head> 转载于:...
  • HTML5 SVG全屏背景图片切换是一款TweenMax.js基于svg制作全屏背景图片滑动切换代码。
  • 背景图片不重复不平铺,可以这样设定背景: <body style="background-image: url("图片文件地址"); background-attachment: fixed;"> 这样背景图片就会固定住,不会因页面滚动而重复。 使图在任何大小的屏幕...
  • html5全屏背景图片放大切换幻灯片特效 html5全屏背景图片放大切换幻灯片特效 html5全屏背景图片放大切换幻灯片特效 html5全屏背景图片放大切换幻灯片特效
  • CSS实现网页背景图片自适应全屏

    千次阅读 2019-03-25 16:52:43
    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形...
  • 主要介绍了HTML5轻松实现全屏视频背景的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • HTML5 SVG全屏背景图片切换是一款TweenMax.js基于svg制作全屏背景图片滑动切换代码。
  • 那么 CSS 怎么设置背景图片自适应全屏呢?这篇文章告诉你。实现效果:源码:CSS设置背景图片自适应 - 编程狮(w3cschool.cn)body{position:fixed;top: 0;left: 0;width:100%;height:100%;min-width:...
  • 全屏显示背景图片,在某些时候非常需要,那么如何实现浏览器全屏显示呢?下面有个不错的示例,感兴趣的朋友可以参考下
  • HTMLl + CSS3全屏背景图片幻灯片轮播, 不限照片数量, 具有四种形式的播放效果 HTMLl + CSS3全屏背景图片幻灯片轮播, 不限照片数量, 具有四种形式的播放效果 HTMLl + CSS3全屏背景图片幻灯片轮播, 不限照片数量, 具有...
  • html5全屏响应式背景图片导航菜单特效 html5全屏响应式背景图片导航菜单特效
  • 然后设置DIV和IMG的大小为100%,并固定到屏幕最底层,这样就实现了完美的拉伸并最大化图片的目的。 首先在Body中加入下面的代码: &lt;div id="div1"&gt;&lt;img src="img.jpg" /&...
  • 这是一款css3实现的全屏背景图片渐变式切换代码特效,图片缩小渐变动画切换效果,不依赖任何JS代码。
  • vue设置背景占满全屏

    千次阅读 2021-06-26 21:55:58
    解决背景图片占满全屏的问题如下: 1、首选要新建一个全局样式表global.css文件,代码如下: /* 全局样式表 */ html, body, #app { height: 100%; margin: 0; padding: 0; } 2、在项目入口文件导入全局样式表,...
  • jQuery响应式全屏背景图片导航菜单特效
  • uni-app设置背景图片占满全屏

    万次阅读 2020-08-18 18:43:33
    这里的样式写的内联,使用class不生效,记得最外面的盒子要设置宽高,不然显示不了。 第一次用uni-app开发~~,有不对的可以指出,谢谢。 <template> <view class='login-box'> <image src="../....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,649
精华内容 7,059
关键字:

html设置背景图片全屏