<!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. 在Windows上搭建kafka环境

    英文文档:https://dzone.com/articles/running-apache-kafka-on-windows-os 第一步:安装JDK 百度很多,不赘述 第二步:安装ZooKeepe ...

  2. POJ3693(SummerTrainingDay10-J 后缀数组)

    Maximum repetition substring Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10241   Ac ...

  3. 手机网页meta,添加使其兼容各种浏览器

    虽然手机不像电脑那样会有各种低版本的浏览器,但写手机端网页也是需要注意的: <!-- 优先使用 IE 最新版本和 Chrome --> <meta http-equiv=" ...

  4. 本地服务器搭建服务：mysql

    话不多少,mysql的优劣不再此讨论. 1.官网地址:https://dev.mysql.com/downloads/mysql/ 下载页面直接  No thanks,just start my do ...

  5. cf280C. Game on Tree(期望线性性)

    题意 题目链接 Sol 开始想的dp,发现根本不能转移(貌似只能做链) 根据期望的线性性,其中\(ans = \sum_{1 * f(x)}\) \(f(x)\)表示删除\(x\)节点的概率,显然\( ...

  6. 【代码笔记】iOS-4个可以单独点击的button

    一,效果图. 二,工程图. 三,代码. ViewController.m #import "ViewController.h" @interface ViewController ...

  7. 问题处理：PROCESS一个domain节点起不来

    今早遇到一个问题,在看服务器列表时候,红框中的服务器是停机的,PSUNX4与该服务器是同一台机器,排除机器down掉的情况. 登陆服务器,在关闭psunx2节点时候,报错:can't attach t ...

  8. jQuery首页更换背景皮肤

    昨天做了一个jQuery首页更换背景皮肤,感觉还是挺不错的,一共需要两个文件,一个是我们写的HTML文件,我们起名叫做index.html,一个是我们引入的jQuery文件,我们起名叫做jQuery. ...

  9. 用烂点子打破沉默的"麦当劳理论"

    "麦当劳"理论是啥? 讨论周末聚餐去哪儿的时候,朋友们往往太过顾及彼此的想法,犹豫着等待其他人做决定. 当谁也不愿说出提议的时候, 我往往会耍一个花招:推荐去麦当劳吃. 宝贵的休息 ...

  10. win10 安装microsoft.net framework3.5

    转载于:https://www.windows10.pro/win10-net-framework-3-5/ 之前手残不小心把microsoft.net framework3.5删了,结果导致Sql ...