<!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. RxJava1升级到RxJava2的注意事项

    1.package更改 rx1包名由原来的rx.xxx更改为io.reactivex.xxx,并且在同一个module之下,rx1和rx2是不兼容的. 2.背压支持 RxJava在1.0只有一个个观察 ...

  2. hadoop的namenode启动失败

    1.jps发现namenode启动失败 每次开机都要重新格式化一下namenode才可以 其实问题出现自tmp文件上,因为每次开机就会被清空,所以现在我们配置一个tmp文件目录. 如果之前没有配置过, ...

  3. C++ 的那些坑 （Day 2）

    虚函数调用的例外 我们知道在通过基类的指针或者引用调用某个对象的函数时,如果这个对象是一个派生类而且该方法是一个虚方法那么一般情况下就会调用派生类的虚方法实现.这个过程是C++的多态.然而这之中有些例 ...

  4. 关于SDN

    传统网络: 一:它们是纯分布式控制 二:控制面和转发面在同一个设备中,紧密耦合 三:管理员无法直接操控转发行为 四:网络协议对转发行为的影响是有固定模式的 而SDN的特性: 一:控制面与转发面分离 二 ...

  5. Django Rest framework 之 视图

    RESTful 规范 django rest framework 之 认证(一) django rest framework 之 权限(二) django rest framework 之 节流(三) ...

  6. Webpack 常用命令总结以及常用打包压缩方法

    前言:Webpack是一款基于node的前端打包工具,它可以将很多静态文件打包起来,自动处理依赖关系后,生成一个.js文件,然后让html来引用,不仅可以做到按需加载,而且可以减少HTTP请求,节约带 ...

  7. ionic 项目下 有时候发现select标签用动态数据绑定后点击出不来的情况

    一 第一种方法 在select 标签的父标签加上  data-tap-disabled=”true” 二 找到 ionic.bundle.js文件 下边有个方法 function tapIgnoreE ...

  8. Ink——一款使用React风格开发命令行界面应用(CLI App)的nodejs工具

    Github: https://github.com/vadimdemedes/ink Ink introduction: React for CLIs. Build and test your CL ...

  9. GIT回推本地commit近期版本

    一次意外吧,本地add并且commit之后拉了别人错误的代码下来,后来本地又需要进行编写测试,无奈只能回推到自己刚刚commit过的代码,但是git命令除了拉去提交等其他的不是很熟悉,在度娘之后也遇到 ...

  10. UIAutomator环境搭建

    目录 下载.安装JDK&配置Java环境变量 下载.安装SDK.ADT&配置Android环境变量 下载.安装ANT&配置ANT环境变量 创建UIAutomator工程 UIA ...