1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>35-背景平铺属性</title>
  6.     <style>
  7.         /*
  8.         div{
  9.             width: 500px;
  10.             height: 500px;
  11.         }
  12.         .box1{
  13.             background-image: url(images/girl.jpg);
  14.             background-repeat: repeat-y;
  15.         }
  16.         */
  17.         /*
  18.         body{
  19.             background-image: url(images/bg2.jpg);
  20.         }
  21.         */
  22.         div{
  23.             width: 980px;
  24.             height: 60px;
  25.             background-image: url(images/1.png);
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30. <!--
  31. 1.如何控制背景图片的平铺方式?
  32. 在CSS中有一个background-repeat属性, 就是专门用于控制背景图片的平铺方式的
  33.  
  34. 取值:
  35. repeat 默认, 在水平和垂直都需要平铺
  36. no-repeat 在水平和垂直都不需要平铺
  37. repeat-x 只在水平方向平铺
  38. repeat-y 只在垂直方向平铺
  39.  
  40. 快捷键
  41. bgr background-repeat:
  42.  
  43. 应用场景:
  44. 可以通过背景图片的平铺来降低图片的大小, 提升网页的访问速度
  45. -->
  46. <div class="box1"></div>
  47. </body>
  48. </html>

H5 35-背景平铺属性的更多相关文章

  1. 手机端浏览器适配，background 背景平铺 ，有的出不来

    .mobilePage .report { background: url(../images/mobile-report.png) repeat; background-size: 100% :/* ...

  2. php 给图片增加背景平铺水印代码

    如果你想利用php 给图片增加背景平铺水印效果话,必须利用php的一个插件来实例,就是利用imagick,他可以给图片增加背景平铺水印效果哦,下面我们提供一款实例代码. 如果你想利用php教程 给图片 ...

  3. android背景平铺方式 tileMode

    创建重复的背景图片  在drawable目录下创建一个repeat_bg.xml:    然后在布局的xml文件中可以这样引用:    ================================ ...

  4. 背景平铺（兼容IE8）

    标准浏览器通过background-size属性设置;IE8以下通过滤镜实现. 代码如下: /* IE8 */ filter: progid:DXImageTransform.Microsoft.Al ...

  5. CSS背景图片常见属性设置

    在CSS中,图片属性的设置是必不可少的,下面介绍一下常见的图片属性: 1)背景图片插入:background-image:url(位置及名称);  //默认在父级元素内的左上角 2)背景平铺方式:ba ...

  6. HTML布局排版2 div的和图片平铺方便管理

    在HTML里,由于浏览器显示器等差异,浏览器的宽度也会有变化,为了适应不同的宽度,需要用到平铺.例如页面前面的固定的条等,如果是纯色,可以用背景色,如果不是纯色,是渐变等,可以用条状图平铺.常见的布局 ...

  7. ie8下背景图片平铺问题

    IE9+及其他浏览器实现背景图片平铺可能需要一个属性就可以background-size:100%/cover; 但是ie8下background-size是不兼容的,因此我们需要用到滤镜,来解决背景 ...

  8. Duilib技巧：背景图片平铺

    贴图的描述 方式有两种    // 1.aaa.jpg    // 2.file='aaa.jpg' res='' restype='0' dest='0,0,0,0' source='0,0,0,0 ...

  9. CSS背景颜色、背景图片、平铺、定位、固定

    CSS背景颜色设置 background-color:red;如设置背景颜色为红色: 背景颜色设置支持3种写法: 颜色名 16进制 rgb CSS背景图片颜色设置 background-image:u ...

随机推荐

  1. java----OO的概念和设计原则（转）

    一．OO(面向对象)的设计基础 面向对象(OO):就是基于对象概念,以对象为中心,以类和继承为构造机制,充分利用接口和多态提供灵活性, 来认识.理解.刻划客观世界和设计.构建相应的软件系统.面向对象的 ...

  2. 洗礼灵魂，修炼python（81）--全栈项目实战篇（9）—— 购物商城登录验证系统

    都在线购物过吧?那么你应该体验过,当没有登录账户时,点开购物车,个人中心,收藏物品等的操作时,都会直接跳转到登录账户的界面,然后如果登录一次后就不用再登录,直到用户登出. 是的,本次项目就是做一个登录 ...

  3. powersploit的用法

    一.PowerSploit简介 PowerSploit是GitHub上面的一个安全项目,上面有很多powershell攻击脚本,它们主要被用来渗透中的信息侦察.权限提升.权限维持. Powershel ...

  4. jvm结构

    JVM的基本结构及其各部分详解(一)  https://www.cnblogs.com/zwbg/p/6194470.html JVM的基本结构及其各部分详解(二) https://www.cnblo ...

  5. VSCode 首次打开提示“Git installation not found.”解决方案

    ※前提大家先在本地安装好相应的git版本(下载地址:https://www.git-scm.com/download/) 一.找到“默认用户设置”

  6. LeetCode算法题-Min Stack（Java实现）

    这是悦乐书的第177次更新,第179篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第36题(顺位题号是155).设计一个支持push,pop,top和在恒定时间内检索最小 ...

  7. leetcode刷题--两数之和（简单）

    一.序言 第一次刷leetcode的题,之前从来没有刷题然后去面试的概念,直到临近秋招,或许是秋招结束的时候才有这个意识,原来面试是需要刷题的,面试问的问题都是千篇一律的,只要刷够了题就差不多了,当然 ...

  8. 【技术与商业案例解读笔记】095：Google大数据三驾马车笔记

     1.谷歌三驾马车地位 [关键词]开启时代,指明方向 聊起大数据,我们通常言必称谷歌,谷歌有“三驾马车”:谷歌文件系统(GFS).MapReduce和BigTable.谷歌的“三驾马车”开启了大数据时 ...

  9. （转）Geoserver基础配图研究

    https://blog.csdn.net/zbcx_ZGIS/article/details/82216151 1面图层配图 1.1基本框架 这个是geoserver默认的polygon的代码,我们 ...

  10. vue-cli3安装创建项目以及目录结构

    安装脚手架cli3.0 全局安装 npm install -g @vue/cli 或 yarn global add @vue/cli 查看版本/是否安装成功 vue -V 如果你仍然需要使用旧版本的 ...