在html中,可利用background-repeat属性来设置背景图片的平铺方式;当属性值设置为“repeat”时可向垂直和水平方向平铺,“repeat-x”时可水平平铺,“repeat-y”时可垂直平铺,“no-repeat”时不平铺。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

html背景图片设置平铺方式

div{

border: 1px solid #000fff;

height: 200px;

background-image: url(img/1.jpg);

margin-bottom:10px ;

}

#content1 {

background-repeat: repeat;

}

#content2 {

background-repeat: repeat-x;

}

#content3 {

background-repeat: repeat-y;

}

#content4 {

background-repeat: no-repeat;

}

效果图:

说明:

background-repeat 属性设置是否及如何重复背景图像,定义了图像的平铺模式。

默认地,背景图像在水平和垂直方向上重复。

属性值:值描述

repeat默认。背景图像将在垂直方向和水平方向重复。

repeat-x背景图像将在水平方向重复。

repeat-y背景图像将在垂直方向重复。

no-repeat背景图像将仅显示一次。

(学习视频分享:css视频教程)

html中设置背景图片为平铺,html背景图片怎么设置平铺方式相关推荐

  1. CSS学习记录3.2/设置标签的背景颜色/控制背景图片的平铺方式/控制背景图片的位置/背景图片关联方式/背景图片和插入图片的区别/捕鱼达人背景练习/精灵图

    设置标签的背景颜色: CSS中的background-color:属性,就是专门用来设置标签.bc+table 设置背景图片: CSS中的background-image: url( );的属性就是设 ...

  2. Web前端,CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写

    前言 持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...

  3. CSS的背景属性设置(背景颜色、背景图片、背景平铺、背景附着、背景复合写法)

    文章目录 1 背景颜色 2 背景图片 3 背景平铺 4 背景图片位置 5 背景图像固定(背景附着) 6 背景复合写法 7 背景色半透明 8 背景总结 案例:五彩导航 通过CSS背景属性,可以给页面元素 ...

  4. CSS常用背景属性(背景颜色、背景图片、背景平铺、背景位置、背景附着、背景色半透明、背景属性复合写法)

    本博文记录CSS中比较常用的背景属性,包括背景颜色:background-color.背景图片:background-image.背景平铺:background-repeat.背景位置:backgro ...

  5. Css的背景(背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定)

    通过css背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等. 背景颜色: Background-color:#******: < ...

  6. 黑马程序员前端-CSS背景:颜色、图片、平铺、背景图片位置、背景图像

    前端学习笔记教程不定期更新中,传送门: 前端HTML第一天:什么是网页?什么是HTML?网页怎么形成? 黑马程序员前端-CSS入门总结 黑马程序员前端-CSS之emmet语法 黑马程序员前端-CSS的 ...

  7. android中可以使用bitmap的平铺,镜像平铺等减小图片带来的apk过大的问题

    bitmap的平铺.镜像drawable文件夹中新建bitmap,其中的tileMode属性 tileMode 属性就是用于定义背景的显示模式:  disabled  默认值,表示不使用平铺  cla ...

  8. qt怎么设置标签背景图片_HTML中怎么设置h1的字体样式你知道吗?关于设置h1标签的样式详解...

    本篇文章主要为大家讲解了html中的h1标签的样式解析,但是如果不用css样式来做的话,那就只能在html4.01中显示了,所以我们还是尽快学习css层叠样式表吧,好了,现在让我们来说说这篇文章吧. ...

  9. .net的label的背景如何设置成为透明_css如何设置背景图片?background属性添加背景图片...

    在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片.有一定的参考价值,有需要的朋友可以参考一下, ...

  10. CSS的背景(背景颜色,背景图片,背景平铺,背景图片位置,背景图片固定(图片附着),背景复合写法)

    CSS的背景 通过 CSS 背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等. 背景颜色 background-color 定义元素的 ...

最新文章

  1. python 线程锁 共享全局变量 线程通信
  2. ssd测试软件cy,目标检测实践_tensorflow版SSD模型测试
  3. 宇宙飞行器的几种飞行原理设计
  4. CMM (培训计划-Training Program)
  5. python的pygame游戏开始结束信息_从0开始学python第14.8节-pygame射击游戏(一)
  6. python安全攻防---爬虫基础--re解析数据
  7. 信恒支付源码-第四方支付源码
  8. VMware vMotion 实时虚拟机迁移
  9. 理解SapLocation()
  10. [面试] 算法(五)—— 替换字符串中的空格
  11. window.location对象、window.navigator对象、window.history对象
  12. 算法导论第三版 第29章习题答案
  13. 响铃:金蝶的SaaS第一能保持多久?
  14. 使用两个无线路由器实现桥接中继
  15. 【海大838】22年考研真题及解析
  16. 多地推广应用电子劳动合同,君子签赋能人力资源管理数字化
  17. Dev C++的安装以及基本使用方法
  18. js自定义提示框弹窗
  19. PHP判断用户是否已经登录,如果登录则显示首页,如果未登录则进入登录页面或注册页面
  20. HDCP @HMAC-SHA256[基于mbedtls]

热门文章

  1. 如何导出专业的工程图纸(附工图模板)
  2. linux安装杀毒软件
  3. TP-LINK校招系统测试岗面经汇总
  4. 周末不知道学什么?这份 Android 优秀技术文章清单请收下
  5. 软件或者网站的版权声明中的两个时间是什么意思?该如何正确书写?
  6. vue路由守卫(页面鉴权)
  7. launcher3的具体学习
  8. 谈谈自信,为什么自信是成功的第一秘诀?
  9. 两个转子的转轮机原理详解与算法实现
  10. [Android] 小男孩短视频去水印新版来了,支持18多个短视频平台去水印例如抖音快手微视皮皮虾等...