精华内容
下载资源
问答
  • html设置背景图片自适应
    万次阅读 多人点赞
    2019-04-25 17:53:47

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

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

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

    更多相关内容
  • html设置背景图片覆盖不重复

    千次阅读 2021-09-21 12:46:43
    在css或body的style属性设置背景图片。 body{ background-image:url(../img/pic_one.jpg) ;/*插入的背景图片的url background-attachment: fixed;/*背景图片不会固定不会因页面滚动而重复*/ background-repeat: ...

    HTML设置背景图

    1. 在css或body的style属性设置背景图片。
    body{
    	background-image:url(../img/pic_one.jpg) ;/*插入的背景图片的url
    	background-attachment: fixed;/*背景图片不会固定不会因页面滚动而重复*/
    	background-repeat: no-repeat;/*使图片不管任何大小都不会重复*/
    	background-size: 100%;/*改变背景图的长和宽*/
    }
    
    <body style="background-image:url(图片地址); background-attachment:fixed ;background-repeat:no-repeat;" >
    
    </body>
    
    1. div或table设置背景图片。
    // 可以直接在div的style属性设置也可命名id后再css中设置均可
    <div style="background-image:url(图片地址)  ··· "> //与body一样
    	...
    </div>
    
    //同理表格也是一样的
    <table style="background-image:url(图片地址)  ··· ">
    	...
    </table>
    
    
    1. 背景图片显示效果

    bcakground-image : url( ··· ) //插入图片地址
    在这里插入图片描述

    background-repeat: x,y,no-repeat //分别是延x轴,y轴,不平铺。
    在这里插入图片描述

    修改完成后的结果图
    在这里插入图片描述

    展开全文
  • HTML设置背景图片

    万次阅读 2019-05-18 11:54:10
    主要使用下面三个参数 background: url(…/…/…/assets/login/login-... //repeat设置重复,center设置位置 background-position: center 0; background-size: cover; //有4种写法分别为 :auto,contain,c...

    主要使用下面三个参数

    background: url(…/…/…/assets/login/login-background.jpg) no-repeat center 0px; //repeat设置重复,center设置位置
    background-position: center 0;
    background-size: cover; //有4种写法分别为 :auto,contain,cover&百分比
    //auto:自动判断,一般出来的效果是,不重复,以长宽中较大的为标准放缩图片
    //contain:不重复,以长宽中较小的为标准放缩图片
    //cover:以长宽中较大的为标准显示图片,不放缩,小了会留白,大了会隐藏

    展开全文
  • html背景图片设置

    千次阅读 2021-08-27 23:50:26
    背景图片:background-img,可用网址或图片存放地址进行设置 平铺方式: background-repeat:repeat,在背景上只出现一张图片,没有设置宽高时全屏铺满 background-repeat:repeat-x,横向铺满 background-repeat:...

    背景颜色:background-color,可用rgb、rgba、#off等进行设置

    背景图片:background-img,可用网址或图片存放地址进行设置

    平铺方式

    background-repeat:repeat,在背景上只出现一张图片,没有设置宽高时全屏铺满

    background-repeat:repeat-x,横向铺满

    background-repeat:repeat-y,纵向铺满

    关联方式:

    background-attachment:scroll        默认

    background-attachment:fixed        锁定

    定位方式:

    background-position:center center,图片在背景上居中

    background-position:center bottom,图片在背景上底部居中

    background-position:right top,图片在背景右上角

    background-position:150px 150px,用像素决定位置

    background-position:-150px -150px,图片只显示部分,负的部分无法呈现

    background-position:center 0,锁定住图片

    背景缩写格式:

    background:背景颜色  背景图片  平铺方式  关联方式  定位方式

    background:red  url(…)   no-repeat  fixed  center center

    示例一:只显示部分图片

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
    	<title>背景图片的定位练习</title>
    	<style>
    	div{
    	width:800px;
    	height:700px;
    	}
    	.pp1{
    	background:red url(images/a1.jpg) no-repeat -100px -100px;
    	}
    	</style>
    </head>
        <body>
    	    <div class="pp1">
    	    </div>
        </body>
    </html>

     

    示例二:滚动鼠标时背景图片不跟着滚动

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
    	<title>背景图片综合运用1</title>
    	<style>
    	.pp1{
    	width:1920px;
    	height:720px;
    	background:url(images/yx.jpg) no-repeat fixed center 0;
    	}
    	</style>
    </head>
        <body>
    	    <div class="pp1">
    	    </div>
        </body>
    </html>

     

    实例三:全局平铺

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
    	<title>背景图片应用1</title>
    	<style>
    	div{
    	width:2000px;
    	height:1000px;
    	}
    	.pp1{
    	background-image:url(images/s2.gif);
    	background-repeat:repeat;
    	}
    	</style>
    </head>
        <body>
    	    <div class="pp1">
    	    </div>
        </body>
    </html>

    展开全文
  • html背景图片怎么设置平铺方式

    千次阅读 2021-06-19 01:20:38
    当属性值设置为“repeat”时可向垂直和水平方向平铺,“repeat-x”时可水平平铺,“repeat-y”时可垂直平铺,“no-repeat”时不平铺。本教程操作环境:windows7系统、...html背景图片设置平铺方式div{border: 1px ...
  • html怎么设置背景图片全屏平铺?

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

    千次阅读 2021-06-10 17:02:49
    我们现在经常会用到CSS,在编写过程中,会遇到CSS背景图像大小设置的问题,下面我们来看一下使用css设置背景图片大小的方法。css可以使用background-size属性设置背景图片大小,background-size属性规定背景图像的...
  • html如何设置网页的背景图片

    千次阅读 2021-10-09 14:37:18
    DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> *{ padding: 0; margin: 0; } .big_box{...
  • HTML设置背景图片填满整个页面

    千次阅读 2020-03-14 13:53:09
    在标签里添加文件路径,语法如下: 这时,页面虽然充满了背景,但被填充了多次。 在里添加样式,代码如下: style=" background-repeat:no-repeat ;...图片自适应窗口大小:background-size:contain...
  • 设置html背景图片属性

    千次阅读 2021-01-12 10:00:54
    #big { background-image: url(${basePath}/dist/img/login.png); background-repeat: no-repeat; background-position: top; background-attachment: fixed; } #login-body { left: 55%;... .
  • HTML设置背景颜色及背景图片

    千次阅读 2020-08-26 23:17:27
    - 可以同时设置背景图片和背景颜色,这样背景颜色将会成为图片的背景色 - 如果背景的图片小于元素,则背景图片会自动在元素中平铺将元素铺满 - 如果背景的图片大于元素,将会一个部分背景无法完全显示 - 如果背景...
  • 如何给html设置背景

    千次阅读 2021-07-21 03:30:24
    2、使用body标签的background属性设置背景图片;3、在body标签中使用style属性,添加“background:颜色值/url('图片路径')”。本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。html设置背景1、...
  • HTML设置背景图片是否重复

    千次阅读 2020-01-05 15:28:03
    在css中,background-repeat可设置图片是否重复及如何重复。 1、background-repeat:repeat是默认属性,设置该属性使图片在水平与垂直方向上重复。 2、background-repeat:no-repeat 图片仅显示一次。 3、background-...
  • html背景图片怎么设置大小

    千次阅读 2021-06-13 14:09:34
    html背景图片设置大小的方法:首先新建HTML页面,给标签设置背景图片;然后给body标签设置【background-size】属性;最后在div标签设置宽高即可。本教程操作环境:windows7系统、HBuilderX.3.0.5版,DELL G3电脑。...
  • HTML背景图片设置

    千次阅读 2020-02-19 22:02:06
    背景:学习前端知识,自己做页面 ...简介:HTML背景图片设置HTML背景图片设置background-image: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...
  • CSS设置背景图片不显示的解决方法

    千次阅读 2021-06-13 08:41:37
    在建立新的内容模型的时候,需要修改前台的文章页面的排版,为了使页面各个部分的显示效果一致,希望增加的部分的标题的背景图片与其他版块的背景相同。为了方便,于是就直接从原有的CSS文件中把代码复制过来了,...
  • HTML设置图片为页面背景

    万次阅读 多人点赞 2020-12-06 22:30:46
    HTML页面中不使用CSS盒模型的前提下如何将一张图片设置为页面背景? 方法: 在< body >中使用background以及style来设置 例: 在这里我把html格式的文件和jpg格式的图片文件都放到了桌面上 <html> ...
  • div设置背景图片透明度且字不透明,div设置背景图片透明度且字不透明
  • css如何设置背景图片大小

    千次阅读 2021-06-11 17:45:14
    css如何设置背景图片大小在css中控制插入背景图片的大小用background-size属性。background-size语法:background-size: length|percentage|cover|contain;length用法:(相关课程推荐:css视频教程)background-size:...
  • css设置图片背景透明度

    千次阅读 2021-06-12 02:59:26
    我们经常会使用到背景图片,但有时候需要把背景图片设置一个半透明的效果,那么就需要以下的CSS了。这是一个CSS滤镜达到的效果,应用十分广泛。.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto!...
  • HTML背景图片

    千次阅读 2022-03-07 21:23:20
    首先大家需要料及一个属性:background-image ,通过这个属性来设置背景图片。用url来引入图片位置 background-image: url(F2581BA79A437DCC9807D1311783E298.jpg); 然后我们引入图片之后,来了解一下如何设置你...
  • 背景图片不重复不平铺,可以这样设定背景: <body style="background-image: url("图片文件地址"); background-attachment: fixed;"> 这样背景图片就会固定住,不会因页面滚动而重复。 使图在任何大小的屏幕...
  • 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)

    千次阅读 2021-06-11 12:51:12
    满意答案xiayuwap推荐于 2017.12.15采纳率:51%等级:8已帮助:959人可以设置啊,如图:常见的失败做法最常见的做法事设置元素的opacity,这种设置出来的效果就是内容与背景都事半透明的,严重影响视觉效果。...
  • HTML5中背景图片如何设置

    万次阅读 2019-08-06 09:31:51
    我觉得网页背景设置成这样子已经挺不错的了~我很满意~~~ 首先先看一下效果吧,差的效果图我就不放了: 可能第二张图片截图有点大,导致博客显示不太妙。那直接上代码吧: body { /*background: rgb...
  • 那么今天小编来教大家怎么在 html 网页中设置背景图片吧!1.首先还是老样子,我们在开发工具中新建一个 .html 文件,然后再文件中自己定义自己喜欢的内容,代码如下:网页背景设置网页背景怎么设置网页背景怎么设置...
  • html网页背景图片设置

    千次阅读 2021-06-10 16:29:38
    背景图片属性(background-image)这个属性是设置HTML元素背景图片,相当于background属性一样。背景图片属性(background-repeat:)定义图片的平铺模式,默认值为repeat图片在水平和垂直方向重复显示。repeat-x : 图片...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 274,639
精华内容 109,855
关键字:

html设置背景图片

友情链接: bualsteinp.rar