本篇内容主要讲解“css怎么设置背景图的平铺模式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css怎么设置背景图的平铺模式”吧!
成都创新互联服务项目包括平顺网站建设、平顺网站制作、平顺网页制作以及平顺网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,平顺网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到平顺省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
当我们有一张背景图的时候,如何设置这个背景图的平铺方式呢?
先来看一个小栗子,就拿上篇文章的代码吧。
<style> div{ background-image: url("images/3.jpg"); background-repeat:no-repeat; background-position:left; } </style> </head> <body><div> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> </div> </body>
这个结果是
我们可以看到,这个小例子中的背景图一直都是这张,但是图片出现的次数发生了改变,这是什么原因呢?可以看到,我们修改了background-repeat这个属性的值,今天我们就来说一下这个属性。
background-repeat
属性设置是否及如何重复背景图像。背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。默认地,背景图像在水平和垂直方向上重复。重复的图像被剪裁为元素的大小,但它们可以缩放 (使用round
) 或者均匀地分布 (使用space
)。
该属性从原图像开始重复,原图像由background-image
定义,并根据background-position
的值放置。
在这个属性中一共有四个属性值,分别是repeat
,repeat-x
,repeat-y
和no-repeat
。其中,repeat代表背景图像将在垂直方向和水平方向重复;repeat-x代表背景图像将在水平方向重复;repeat-y代表背景图像将在垂直方向重复;no-repeat代表背景图像不重复,只出现一次。
到此,相信大家对“css怎么设置背景图的平铺模式”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
网页题目:css怎么设置背景图的平铺模式
分享URL:https://www.cdcxhl.com/article44/iheehe.html
成都网站建设公司_创新互联,为您提供定制网站、软件开发、网页设计公司、动态网站、关键词优化、用户体验
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联