当前位置: 首页 > news >正文

php中背景图怎么设置不重复,css怎么让背景图片不重复

在css中,可以使用background-repeat属性来让背景图片不重复,该属性可以设置背景图片是否重复以及如何重复;只需给背景图片设置“background-repeat:no-repeat;”样式即可让背景图片不重复。

e24d9b9be5b47b56a7109ad5b7b03b5a.png

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

CSS设置背景图片

在CSS中,我们可以利用 background 属性来设置背景图片,如下面的代码

演示背景图片

body{

background: url('20190621232252.png');

}

运行代码我们发现,背景图片无论是横向或是纵向都是重复,直至铺满整个显示区域。

dc3fb44995d788fefb3645bc12f14d52.png

CSS background-repeat 属性

CSS中有个 background-repeat 属性,可以设置图片背景图片是否重复以及如何重复,它的默认值是横向和纵向都会重复,如果不设置此属性的值,那么背景图片就如上面的示例代码一样,会横向以及纵向同时重复,并铺满整个要显示的区域。

它有三个可以设置的值,分别如下,其中 repeat 值为默认。repeat :默认。背景图像将在垂直方向和水平方向重复。

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

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

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

inherit :规定应该从父元素继承 background-repeat 属性的设置。

css背景图片只水平方向(横向)重复

CSS代码:body{

background: url('20190621232252.png');

background-repeat:repeat-x;

}

运行结果如下图,背景图片都是水平方向重复的

dba4ed49f82668ab1d3e46dce69e2f79.png

css背景图片纵向重复

CSS代码body{

background: url('20190621232252.png');

background-repeat:repeat-y;

}

运行结果如下图,背景图片都是纵向重复

e13506fccb7d06398fa2a7cfeff7de85.png

css背景图片不重复

CSS代码body{

background: url('20190621232252.png');

background-repeat:no-repeat;

}

运行结果如下图,背景图片横向以及纵向都不会重复,只会显示一张

14325055abeac13b6b7f60687dc6621b.png

更多编程相关知识,请访问:编程教学!!

相关文章:

  • java标签更改显示,离子选项卡,如何在标签更改上显示微调器?
  • java读写二进制文件 移动指针 seek,《Java大学教程》—第20章 文件处理
  • php权限无需验证的控制器,控制器 · ThinkPHP5权限管理 · 看云
  • 两'参数粒子群matlab,SVM用粒子群优化参数
  • 数据在文本框中显示 php,在文本框中使用php和纯ajax从数据库加载数据
  • 数字信号处理matlab滤波器,数字信号处理matlab滤波器课程设计
  • matlab逆求贝塞尔函数变量值,MATLAB怎么求解有贝塞尔函数的问题,求高手帮帮忙,谢谢...
  • java 继承 默认作用域,Spring(三)——Bean的 继承关系、依赖关系、作用域
  • matlab中的newfis,(To be removed) Create new fuzzy inference system
  • php apache 301重定向,Apache下修改.htaccess实现301重定向方法汇总
  • php一对多关联,SpeedPHP/数据表一对多关联
  • import matlab.engine,请教python导入matlab engine失败的问题。
  • php封装pdo连接书记库,PHP封装的PDO数据库操作类实例分析
  • 推荐几本php的好书,新手,求几本php的好书!
  • 管理python库的工具,Python的包管理工具
  • JS笔记四:作用域、变量(函数)提升
  • JS进阶 - JS 、JS-Web-API与DOM、BOM
  • MyEclipse 8.0 GA 搭建 Struts2 + Spring2 + Hibernate3 (测试)
  • mysql_config not found
  • pdf文件如何在线转换为jpg图片
  • React-生命周期杂记
  • vue的全局变量和全局拦截请求器
  • 从0搭建SpringBoot的HelloWorld -- Java版本
  • 服务器之间,相同帐号,实现免密钥登录
  • 基于组件的设计工作流与界面抽象
  • 理解IaaS, PaaS, SaaS等云模型 (Cloud Models)
  • 前端临床手札——文件上传
  • 前端面试之CSS3新特性
  • 数据仓库的几种建模方法
  • 数据结构java版之冒泡排序及优化
  • 双管齐下,VMware的容器新战略
  • 思考 CSS 架构
  • 思维导图—你不知道的JavaScript中卷
  • 提醒我喝水chrome插件开发指南
  • 想使用 MongoDB ,你应该了解这8个方面!
  • 学习JavaScript数据结构与算法 — 树
  • 由插件封装引出的一丢丢思考
  • 浅谈sql中的in与not in,exists与not exists的区别
  • ​​​​​​​sokit v1.3抓手机应用socket数据包: Socket是传输控制层协议,WebSocket是应用层协议。
  • ​一些不规范的GTID使用场景
  • #QT项目实战(天气预报)
  • (二)Eureka服务搭建,服务注册,服务发现
  • (翻译)Quartz官方教程——第一课:Quartz入门
  • (附源码)springboot优课在线教学系统 毕业设计 081251
  • (附源码)计算机毕业设计SSM疫情居家隔离服务系统
  • (汇总)os模块以及shutil模块对文件的操作
  • (机器学习的矩阵)(向量、矩阵与多元线性回归)
  • (五)IO流之ByteArrayInput/OutputStream
  • . NET自动找可写目录
  • .[backups@airmail.cc].faust勒索病毒的最新威胁:如何恢复您的数据?
  • .gitignore文件_Git:.gitignore
  • .NET BackgroundWorker
  • .NET 服务 ServiceController
  • .Net 垃圾回收机制原理(二)
  • .NET/C# 的字符串暂存池