<!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. Could not transfer artifact org.apache.maven.plugins:maven-resources-plugin:pom:2.6 from/to central

    问题: maven安装完成,环境变量配置没有问题,cmd窗口运行mvn compile的时候报错如下: Plugin org.apache.maven.plugins:maven-resources- ...

  2. linux_shell_传递参数

    在执行shell脚本时可以传递参数: 脚本获取参数的格式为:$0  $1  $2 ...其中$1 为传递的第一个参数  而$0 接受的是./test.sh 这个东西 代码:例: #!/bin/bash ...

  3. JAVA—集合框架

    ref:https://blog.csdn.net/u012961566/article/details/76915755 https://blog.csdn.net/u011240877/artic ...

  4. Codeforces675D(SummerTrainingDay06-J)

    D. Tree Construction time limit per test:2 seconds memory limit per test:256 megabytes input:standar ...

  5. Angular 6.X CLI(Angular.json) 属性详解

    Angular CLI(Angular.json) 属性详解 简介 angular cli 是angular commond line interface的缩写,意为angular的命令行接口.在an ...

  6. js-ES6学习笔记-Iterator

    1.遍历器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据结构的所有成员). 2.Iterator ...

  7. 葡萄城报表V11 SP2新版本震撼发布！

    葡萄城报表正式发布 v11.2 版本,强势推出国内首创的基于HTML5的在线报表设计器,从此报表设计告别桌面应用程序,随时随地修改报表,真正跨平台操作,从而使任何报表用户更快速的响应报表业务变化! 在 ...

  8. 语义SLAM的数据关联和语义定位（一）

    语义SLAM和多传感器融合是自动驾驶建图和定位部分比较热门的两种技术.语义SLAM中,语义信息的数据关联相较于特征点的数据关联有所不同.我们一般用特征描述子的相似性来匹配和关联不同图像中的特征点.特征 ...

  9. [Android] (在ScrollView里嵌套view)重叠view里面的onTouchEvent的调用方法

    在我前面的自定义裁剪窗口的代码中,我把裁剪的view放在了大的scrollview里,这样就出现了程序只能触发scrollview,无法操作我的裁剪窗口.所以我加了那篇博客下面最后两段代码.其实我遇到 ...

  10. 本地用maven搭建SpringMvc+redis集成

    ---恢复内容开始--- 首先本地需要搭建私服,简单说一下搭建私服的步骤 1.为什么使用Nexus 如果没有私服,我们所需的所有构件都需要通过maven的中央仓库和第三方的Maven仓库下载到本地,而 ...