<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         #background_set{

             background-color: grey;

             width: 800px;

             height: 900px;

             background-image: url(../picture/.png);  /* 默认是平铺*/;

             /*background-repeat:no-repeat;*/

             /*no-repeat 不重复  repeat-x x轴重复，repeat-y  y轴重复 */

             /*background-size: 100% 100%;/*背景图片大小设置*/

             /*background-position: center center;*/

             /* 值分别为x轴和y轴的数值，可以是像素也可以x轴：left、right、cener；y轴:top、center、bottom

                默认值：center（值填写一个一直）。

             */

          background-repeat: repeat-x;

          background-position:center 0px;

          /*他会把中间的图片放在x轴的中间，这个比较有用做背景色 数值可以设置正负*/

          background-attachment: fixed;

          /*背景图片，位置设置，固定还是随着滚轮滑动*/

         }

     </style>

 </head>

 <body>

     <div id="background_set"></div>

 </body>

 </html>

以上我们做的设置是单一样式设置，这些都是背景色的设置，我们可以用复合样式来进行对背景色的设置。

复合样式，即用background来设置这些属性：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         .background_set{

             width: 800px;

             height: 1500px;

             background: grey url(../picture/.jpg) no-repeat  center fixed;

         }

     </style>

 </head>

 <body>

     <div class="background_set">

         <br/>

         <br/><br/><br/><br/><br/><br/><br/>

         <br/><br/><br/><br/><br/><br/><br/>

         <br/><br/><br/><br/><br/><br/><br/>

         <br/><br/><br/><br/><br/><br/><br/>

     </div>

 </body>

 </html>

其中，对于属性background-attachment 属性的解释：如下

前端：background 设置的更多相关文章

  1. background 设置文本框背景图

    background 属性的作用是给元素设置背景,它是一个复合属性,常用的子属性如下: background-color 指定元素的背景颜色. background-image 指定元素的背景图像. ...

  2. 前端imageBuffer设置图片src（后端返回二进制流图片）

    参考地址1:前端imageBuffer设置图片src(后端到前端直传buffer) 参考地址2:axios根据流生成图片 本质为buffer转base64 // 获取项目截图 getItemPic() ...

  3. CSS 常用 background 设置

    CSS 背景图片设置: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...

  4. 前端web设置div宽高一样

    <div class="constant-width-to-height-ratio"></div> .constant-width-to-height-r ...

  5. 前端imageBuffer设置图片src(后端到前端直传buffer)

    本质为buffer转base64 let bytes = new Uint8Array(imageBuffer.data); let data = ""; let len = by ...

  6. 前端jq设置下拉框的，单选框，复选框的帖子

    $(function(){ var sex=$("#sex").val(); var marriageStatus=$("#marriageStatus").v ...

  7. django websocket 实现后台日志在web端展示（+前端vue设置）

    核心代码: @accept_websocket def get_log(req): if req.is_websocket(): print('收到websocket请求') with open(se ...

  8. 前端优化-Img与background

    当img 遇到 background,这个世界就是这么小~~~~~ 1 从解析机制看 Img属于html标签,background是css方法.一个页面由html.css.js组成,按照浏览器解析机制 ...

  9. Img与background的区别

    今天做项目中,用background显示了二维码和一些文字,但显示到页面上时,二维码和图片都变得模糊了.于是将图片调整.放大,但在放大后,作为背景图片的它则显示不全,无奈之下用了backgroung- ...

随机推荐

  1. 'QuerySet' object has no attribute '_meta'

    'QuerySet' object has no attribute '_meta' 对象列表没有'_meta'属性 单独的对象才有, 忘记加first了 edit_obj = models.Role ...

  2. H5自适应屏幕分辨率大小

    说明: ①:H5自适应不同分辨率的设备,其实主要就一句 <meta name="viewport" content="width=device-width,init ...

  3. js-ES6学习笔记-正则的扩展

    1.在ES5中,RegExp构造函数的参数有两种情况.第一种情况是,参数是字符串,这时第二个参数表示正则表达式的修饰符(flag).第二种情况是,参数是一个正则表示式,这时会返回一个原有正则表达式的拷 ...

  4. Everything实用技巧随手记

    Everything是一款非常好用的即时搜索软件,针对文件名目录名搜索,并且支持通配符.正则表达式,胜过windows自带搜索N倍. 在使用中有些许不便,比如搜索结果中出现很多快捷方式,或者搜索到不想 ...

  5. Android--解决EditText放到popupWindow中，原有复制、粘贴、全选、选择功能失效问题

    1.原来是将EditView放到了popupwindow,发现EditView原有的复制.粘贴.全选.选择功能失效了,所以便用DialogFragment代替了popupWindow 直接上代码 ①. ...

  6. Express4.X中的bin/www是作什么用的？为什么没有后缀？

    使用Express4.X的同学会发现,相比Express3.X初始化项目时多了一个bin目录,并且下面还有一个www文件,那么它们有什么用呢? 在Express 3.x中集成了很多中间件,www和ap ...

  7. Python3 sqlacodegen 根据已有数据库生成 ORM 使用的 model.py

    pip install sqlacodegen pip install pymysql sqlacodegen mysql+pymysql://username:password@127.0.0.1: ...

  8. RHEL7系统管理常用工具

    RHEL7提供大量系统管理工具,简要记录一下各工具的作用,后续再详细说明用法. 工具 描述 /proc linux的内存镜像目录./proc/sys目录下的文件能被临时修改,从而改变linux内核参数 ...

  9. 从零起步做到Linux运维经理，你必须管好的23个细节

    不想成为将军的士兵,不是好士兵-拿破仑 如何成为运维经理?成为运维经理需要什么样的能力?我想很多运维工程师都会有这样的思考和问题. 如何成为运维经理.一般来说,运维经理大概有两种出身,一种是从底层最基 ...

  10. wc 命令使用说明

    wc 命令 使用说明 wc 命令还是很是简单的,通过 man 命令,可以见到可以选择的选项: wc option file 并且 wc 命令支持 管道操作 其中较为常用的命令选项 -c 字符的个数 - ...