精华内容
下载资源
问答
  • body设置背景图片

    千次阅读 2021-03-06 23:30:25
    } style> head> <body> body> html> background-size:cover background-size 设置背景图片大小。图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。 cover ...

    效果

    在这里插入图片描述

    代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>换肤效果</title>
        <style>
        body{
       		 background:url(image/changeBack/04.jpg) no-repeat center top;
       		 background-size:cover;
       		 background-attachment:fixed;
    		}
        </style>
    </head>
    <body>
    
    </body>
    </html>
    

    background-size:cover

    background-size 设置背景图片大小。图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
    cover
    缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。和 contain 值相反,cover 值尽可能大的缩放背景图像并保持图像的宽高比例(图像不会被压扁)。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时,背景图的 左/右 或者 上/下 部分会被裁剪。
    contain
    缩放背景图片以完全装入背景区,可能背景区部分空白。contain 尽可能的缩放背景并保持图像的宽高比例(图像不会被压缩)。该背景图会填充所在的容器。当背景图和容器的大小的不同时,容器的空白区域(上/下或者左/右)会显示由 background-color 设置的背景颜色。
    background-size属性MDN详解

    background-attachment

    background-attachment CSS 属性决定背景图像的位置是在视口内固定,或者随着包含它的区块滚动。
    fixed
    此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。
    local
    此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动, 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
    scroll
    此关键属性值表示背景相对于元素本身固定, 而不是随着它的内容滚动(对元素边框是有效的)。
    background-attachment属性MDN详解

    展开全文
  • 我想让整个登录界面有一个背景图片,自然想到的是在bodybackground,代码如下: body { width:100%; height: 100%; background-image: url(../../Content/images/background-home-one.jpg); background-...

    我想让整个登录界面有一个背景图片,自然想到的是在body上加background,代码如下:

    body {
    	width:100%;
    	height: 100%;
    	background-image: url(../../Content/images/background-home-one.jpg);
    	background-repeat: no-repeat;
    	background-size: 100% 100%;
    }
    

    但是body的高度为0,所以图片不能显示;

    解决办法是给html设置宽高各100%,这样body就有值了,背景图片完整的充满整个屏幕。

    展开全文
  • web-页面body添加背景图片

    万次阅读 2019-01-26 14:22:50
    页面body添加背景图片 背景图片存在static文件夹中 1、设置setting.py文件夹。 STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ] 2、在html文件中,加载static文件夹,加入第...

    页面body添加背景图片

    在这里插入图片描述
    在这里插入图片描述
    背景图片存在static文件夹中

    1、设置setting.py文件夹。

    STATIC_URL = '/static/'
    STATICFILES_DIRS = [
        os.path.join(BASE_DIR, 'static'),
    ]
    

    2、在html文件中,加载static文件夹,加入第一行就好了。

    {% load staticfiles %}
    <!DOCTYPE html>
    <html lang="zh-CN">
    

    3、login.html文件:

    <body style="background: #ffffff url({% static "images/aini.jpg" %});background-size:100% 150%;">
    

    4、index.html文件

    <body style="background: #ffffff url({% static "images/dao.jpg" %});background-size:100% 500%;">
    

    我图片的地址是:工程根目录/static/images/aini.jpg

    background-size后面的两个百分数就是 分别设置 背景图片的长宽,根据需求自己设定。

    作者:xxx_gt
    来源:CSDN
    原文:https://blog.csdn.net/xxx_gt/article/details/79724344
    版权声明:本文为博主原创文章,转载请附上博文链接!

    展开全文
  • css 给body设置背景图片

    千次阅读 2018-12-15 21:12:00
    转载于:https://www.cnblogs.com/classmethond/p/10124702.html

     

    转载于:https://www.cnblogs.com/classmethond/p/10124702.html

    展开全文
  • <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>IndexMain</title> <!--样式-->... body { height: 10
  • 话不多说直接上代码 body { background:url(... background-size:cover; background-attachment:fixed; /* 设置背景颜色,背景图加载过程中会显示背景色 我试了下可可不 */
  • 主要介绍了JS动态修改网页body背景色实例代码 ,需要的朋友可以参考下
  • body背景图没有拉伸效果,所以只能使用其他方法了,IE中测试可行的,具体实现如下,感兴趣的朋友可以了解下哦
  • html 设置body背景图片

    千次阅读 2014-07-23 14:41:19
    <title></title> <body background="images\01.png"> </body> 就是一个background属性,指定背景图片 全屏截图太大了,我只截了一部分
  • 样式如下只有IE可以显示背景图片,火狐和谷歌等浏览器都显示不了,解决方法如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
  • vue在body设置了背景图的情况下怎么给组件加背景颜色? 我在vue组件中设置背景图后没有任何反应,但是把页面缩小的话组件图片反而会显示出来,应该怎么设置? 图一是正常大小,图二是页面缩小后! ...
  • html设置背景图片自适应

    万次阅读 多人点赞 2019-04-25 17:53:47
    在网上找了很久,终于在一个百度问答里找到正确答案,记录下来,方便以后使用。 在<body>中设置: <body background="images\bg.jpg" style=" background-repeat:no-repeat ;...第一行是图片...
  • 今天做系统界面,一屏展示,“body”中插入背景图片遇到一个从来没遇到过的问题,背景图片设置不重复平铺的时候,图片设置相对于屏幕下定位(background-position:bottom)后,背景图不显示。 原来body默认高度是0;...
  • 2019独角兽企业重金招聘Python...body{ background:url("../img/Flyer-bg.png") no-repeat; background-size: 100%; }   转载于:https://my.oschina.net/u/1266171/blog/2994911
  • body背景图片的自适应

    千次阅读 2019-01-10 14:17:37
    body{ background:url(../image/bg-m.jpg) no-repeat; background-size: cover;//或者background-size: 100% 100%; } background-size contain 与cover的区别 在no-repeat情况下,如果容器宽高比与...
  • 代码如下: body{  margin:0; padding:0;  background:url(../images/headbg.jpg) repeat-x; background-position:center top; }
  • CSS中Body背景图片的自适应

    千次阅读 2020-08-10 09:36:11
    body{ background:url(../image/bg-m.jpg) no-repeat; background-size: cover;//或者background-size: 100% 100%; } background-size contain 与 cover 的区别 在no-repeat情况下,如果容器宽高比与图片宽高比...
  • java web项目中如何插入背景图片

    万次阅读 2018-11-12 20:12:59
    对于java可视化界面插入背景图片这个倒是轻而易举,只需要background-inage:url(图片路径就行),而对于与web项目中,我开始时也是采用这种方法,但是不尽然,代码如下: &lt;div class='ban' style="...
  • HTML5 body设置全屏背景图片

    万次阅读 2018-10-20 15:16:37
    之前这样加背景图测出来有的手机浏览器上全屏背景图宽度超过屏幕宽度,比如mate9上 &amp;lt;div class='box'&amp;gt;&amp;lt;/div&amp;gt; html,body{ width:100%; height:100% } .box{ width: ...
  • body背景图平铺拉伸

    千次阅读 2019-10-04 20:25:17
    总结:让body背景图铺满整个页面 添加以下代码即可: background-size: 100%;
  • HTML设置body背景图片全屏显示

    万次阅读 2019-09-26 14:37:51
    在head标签中添加body属性设置: <head><style>body{background:url(timg1.jpg) top left;background-size:100%;}</style></head> 转载于:...
  • css里面如何设置body背景图片满屏

    千次阅读 2019-09-14 05:22:36
    本文转载于:猿2048网站css里面如何设置body背景图片满屏 @{ Layout = null; ViewBag.Title = "Login Page"; } <!DOCTYPE html> <html> <head> ...
  • body背景图片随窗口大小变动

    千次阅读 2019-03-01 11:01:09
    body").css({"background-size":"100% "+$(document).height()+"px"}); }) $(window).resize(function () { $("body").css({"background-size":&
  • 但是在利用生命周期函数动态获取背景图片时会出现图片获取不成功的问题。 问题: 在css中设置body背景图,使用相对路径可以设置成功,但是采用生命周期函数相对路径获取图片却获取不到 摸索: 使用网络图片的...
  • 主要介绍了css设置body背景图片满屏的实例代码,需要的朋友可以参考下
  • Html设置网页背景图片

    万次阅读 多人点赞 2015-11-29 21:17:48
    为网页添加背景图片可以衬托网页的显示效果,从而取得更好的视觉效果。背景图片的选择不仅要注意好看,而且还要注意不能喧宾夺主,影响网页内容的阅读。通常使用深色的背景图片配合浅色的文本,或者浅色的背景图片...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 94,081
精华内容 37,632
关键字:

body加背景图片