CSS如何让背景图片不重复?

CSS如何让背景图片不重复?

css中设置完背景图后,不指定平铺属性,默认是横向纵向重复的,导致图片出现重复。让图片不重复可以设置background-repeat属性。

css中background-repeat是设置图片平铺属性的,其中值有5个:

1、repeat 横向和纵向重复,这是默认的

2、repeat-x 横向重复

3、repeat-y 纵向重复

4、no-repeat 不重复

5、inherit 设置background-repeat属性应该从父元素继承(IE9以上支持)

(推荐学习:CSS视频教程

代码如下:

.header{
    height: 160px;
    background: url('css-4.jpg') no-repeat;
}

<div class="header"></div>

这样就不会出现重复的背景图了.

Image placeholder
前端答疑
未设置
  80人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css背景图片显示不完怎么解决?

css设置背景图片显示不全是因为背景图片过大导致的,我们可以通过设置div大小大于背景图片或使用background-size属性设置背景图片小于div大小使背景图片显示完全。示例:下面我们来看一下通

css背景图片调用不显示是什么原因?

css背景图片无法显示,有以下几方面原因:  1、css没有被调用;请检查css调用是否成功。  2、css图片地址不对;请检查css图片地址是否正确。  3、元素的高度没有固定,是auto或者没有设

css如何设置图片不变形

css如何设置图片不变形解决方法有两种:一、让图片和布局宽度高度成等比例,这样CSS设置死宽度和高度,图片也是等比例缩小,图片也不会变形。//原尺寸300*200 //等比缩放2:1 img{ wid

css如何设置表格边框不重叠?

css如何设置表格边框不重叠?一、设置css属性border-collapse:collapse。table{ border-collapse:collapse; } tabletr{ border:

css中背景透明的图片不透明怎么解决

css中背景透明的图片不透明怎么解决一、使用滤镜解决img{ background:transparent; -ms-filter:"progid:DXImageTransform.Microsoft

css如何让元素不随滚动条滚动?

在CSS中,可以使用固定定位(position:fixed;)来固定元素的位置,让元素不随滚动条滚动。fixed生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对

css如何让字体不加粗?

在CSS中可以使用font-weight:normal样式来让字体不加粗。font-weight属性设置文本的粗细,设置值为normal来定义标准的字符。font-weight属性用于设置显示元素的文

怎样用css实现图片不间断滚动

怎样用css实现图片不间断滚动效果图:思路分析:第一步,定义div>ul>li*7,因为有7张图片。第二步,设置div的宽度高度以及li的浮动,保证它们全部在div内的同一行。第三步,实现滚动。用到了

js如何修改css属性?

js如何修改css属性?1、修改style样式:通过document.styleSheets[n]//n表示期望修改的样式表序号,从0开始计数来获取到期望修改的样式表,通过cssRules[0]获取到

css如何清除a标签的block属性

css如何清除a标签的block属性a标签默认是inline行内元素,不支持设置宽高等属性。为了让a标签支持宽高属性,我们可以设置a{display:block}将它变成块级元素同样的,清除a标签的b

css如何设置字体位置

css如何设置字体位置1、text-align设置字体的位置text-align语法:text-align:left|right|center|justifytext-align参数值与说明:left

css如何去掉html元素

css如何去掉html元素css无法将html元素完全的从页面中去除,但是可以通过一些方法让它们在视觉上隐藏掉。具体的做法是设置元素css属性display:none和visibility:hidde

js如何引入css文件?

js如何引入css文件?1、使用document.write方式输出引入css的link标签在调用文件的顶部加入下例代码 document.write(''); (注:有时你引用的文件还可能需要引用其

css如何设置元素不显示仅占位置?

css如何设置元素不显示仅占位置?隐藏页面元素可以使用visibility:hidden属性,它将元素设置为不可见,并且占据原来的位置,不能响应点击事件。不可见 .hide{ visibility:

css如何将一行平均分成几列?

css如何将一行平均分成几列?column-count属性规定元素应该被划分的列数。它的取值可以是number|autonumber:元素内容将被划分的最佳列数。auto:由其他属性决定列数,比如"c

css如何实现文字颜色渐变?3种实现方法

基础样式:.gradient-text{ text-align:left; text-indent:30px; line-height:50px; font-size:40px; font-

css如何设置文字描边效果?

想要使用CSS给文字添加描边效果,主要有两种方法:使用text-stroke属性或text-shadow属性。方法1:使用text-shadow属性text-shadow属性用于向文本添加字体边框或阴

css如何把div修饰成圆?

css如何把div修饰成圆?1、打开代码编辑器,新建一个html文件,写上基本的结构 Document 2、在body标签内输入:,这里的div就是用于画圆形的标签。(推荐学习:CSS视

css如何设置元素水平垂直居中显示

课程推荐:PHP开发工程师--学习猿地精品课程 首先我们来介绍以下两个属性: 1、text-align是设置元素中文字的水平对齐方式。 它的作用对象是文本,控制文本,对块状元素等不起效果,只能让块元素

【css】多种背景及使用场景

推荐课程:学习猿地--Java开发工程师在线课--送商业项目--点击进入 background相关使用CSSbackground是最常用的CSS属性之一,但是我们经常使用这个,但往往疏忽到底表达的是什

css3-背景渐变

推荐课程:CSS3基础视频教程#WEB前端必修课--学习猿地免费体验课 线性渐变linear-gradient(direction,color-stop1,color-stop2,...);带兼容写法

一篇文章带你了解CSS3 背景知识

LoremIpsumDolorLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtincidun

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来