精华内容
下载资源
问答
  • css的background-repeat 属性定义了图像...css可以使用background-repeat属性设置图片不平铺。属性值:repeat:沿水平竖直两个方向平铺,这也是默认值no-repeat:不平铺,即只显示一次repeat-x:只沿水平方向平铺re...

    css的background-repeat 属性定义了图像的平铺模式。从原图像开始重复,原图像由 background-image 定义,并根据 background-position 的值放置。

    d7b5e5b10be3bffec80f3058b1dc1979.png

    css可以使用background-repeat属性设置图片不平铺。

    属性值:repeat:沿水平竖直两个方向平铺,这也是默认值

    no-repeat:不平铺,即只显示一次

    repeat-x:只沿水平方向平铺

    repeat-y:只沿竖直方向平铺

    背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性,图像会被放置在元素的左上角。

    示例:

    1、未设置平铺方式

    .box{ border:1px solid #093; width:800px; height:800px;

    background:url(img/3.jpg);}

    hello word

    效果图:

    4de0026d64d6756a673f689113f9525b.png

    2、设置图片不平铺

    .box{ border:1px solid #093; width:800px; height:800px;

    background:url(img/3.jpg)no-repeat;}

    hello word

    效果图:

    726b2f768045494ab2f5470487acc4e4.png

    展开全文
  • css的background-repeat 属性定义了图像...css可以使用background-repeat属性设置图片不平铺。属性值:repeat:沿水平竖直两个方向平铺,这也是默认值no-repeat:不平铺,即只显示一次repeat-x:只沿水平方向平铺re...

    css的background-repeat 属性定义了图像的平铺模式。从原图像开始重复,原图像由 background-image 定义,并根据 background-position 的值放置。

    d7b5e5b10be3bffec80f3058b1dc1979.png

    css可以使用background-repeat属性设置图片不平铺。

    属性值:repeat:沿水平竖直两个方向平铺,这也是默认值

    no-repeat:不平铺,即只显示一次

    repeat-x:只沿水平方向平铺

    repeat-y:只沿竖直方向平铺

    背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性,图像会被放置在元素的左上角。

    示例:

    1、未设置平铺方式

    .box{ border:1px solid #093; width:800px; height:800px;

    background:url(img/3.jpg);}

    hello word

    效果图:

    4de0026d64d6756a673f689113f9525b.png

    2、设置图片不平铺

    .box{ border:1px solid #093; width:800px; height:800px;

    background:url(img/3.jpg)no-repeat;}

    hello word

    效果图:

    726b2f768045494ab2f5470487acc4e4.png

    展开全文
  • css精灵图平铺背景CSS sprites are a great way to improve the loading speed of your pages. One of the problems you might face with sprites is how to deal with cases when the background repeats. CSS ...
    css精灵图平铺背景

    css精灵图平铺背景

    CSS sprites are a great way to improve the loading speed of your pages. One of the problems you might face with sprites is how to deal with cases when the background repeats.

    CSS Sprites是提高页面加载速度的好方法。 Sprite可能会面临的问题之一是如何处理背景重复的情况。

    The rule is pretty simple: if you want the background to repeat vertically (top to bottom), place the images in the sprite horizontally (left to right) and make sure the individual images in the sprite have the same height. For the opposite case: when you want to repeat horizontally, sprite vertically.

    规则非常简单:如果要垂直重复背景(从上到下),则将图像水平放置在精灵中,并确保精灵中的各个图像具有相同的高度。 对于相反的情况:当您想水平重复时,请垂直精灵。

    (Example)

    » Demo

    »演示

    You have three divs and you want to repeat their background vertically, so that the background takes the whole height of the div, according to the content.

    您有三个div,并且要垂直重复其背景,以便根据内容,背景占据整个div的高度。

    Source images:

    源图像:

    1. 1.png
    2. 2.png
    3. 3.png

    Singe image sprite:

    单一图片精灵:

    sprite8.png

    CSS definitions to make this work:

    CSS定义可以使这项工作:

        div {
            background-image:url(sprite8.png);
            background-repeat: repeat-y;
            width: 160px;
            padding: 20px;
            margin: 20px;
            float: left;
        }
     
        #my {
            background-position: 0px;
        }
        #my2 {
            background-position: -200px;
        }
        #my3 {
            background-position: -400px;
        }
    

    Every image is 200px wide. Because of the 2x20px margin left and right, the width is 160px (=200 - 20 - 20)

    每个图像的宽度均为200px。 由于左右边距为2x20px,因此宽度为160px(= 200-20-20)

    The tree divs have IDs: my, my2, my3

    树div具有ID: mymy2my3

    结果 (Result)

    Once again, the result

    再一次,结果

    Tested on Windows with IE7, FF, O, S.

    在Windows上使用IE7,FF,O,S进行了测试。

    Tell your friends about this post on Facebook and Twitter

    FacebookTwitter上告诉您的朋友有关此帖子的信息

    翻译自: https://www.phpied.com/background-repeat-and-css-sprites/

    css精灵图平铺背景

    展开全文
  • body {  background: url(../img/backgrounds/2.jpg) no-repeat center center fixed; ... -webkit-background-size: cover;...http://css-tricks.com/perfect-full-page-background-image/

    body

    {

        background: url(../img/backgrounds/2.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
       background-size: cover;//这条一定要

    }


    该设置对以下浏览器有效:

    • Safari 3+
    • Chrome Whatever+
    • IE 9+
    • Opera 10+ (Opera 9.5 supported background-size but not the keywords)
    • Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
    参考:http://css-tricks.com/perfect-full-page-background-image/
    展开全文
  • css怎么让背景图片不平铺?下面本篇文章就来给大家介绍一下使用CSS设置背景图片不平铺的方法,希望对大家有所帮助。在CSS中,可以通过background-repeat属性来让背景图片不平铺。background-repeat属性定义了图像的...
  • CSS中,可以使用background-repeat属性来设置图片平铺方式。下面本篇文章就来给大家介绍一下CSS background-repeat属性,希望对大家有所帮助。...no-repeat:在X及Y轴方向均不平铺;repeat-x:横向平...
  • css可以设置图片背景background-repeat:no-repeat样式实现图片背景不平铺,background-repeat属性定义了图像的平铺模式。css可以使用background-repeat属性设置图片背景不平铺。从原图像开始重复,原图像由 ...
  • css设置背景图片,默认的样式是图片重复,有的时候页面只需要一个不重复的背景图片,这就需要使用到css背景图片重复属性background-repeat: no-repeat;进行设置。background-repeat属性background-repeat 属性设置...
  • css可以设置图片背景background-repeat:no-repeat样式实现图片背景不平铺,background-repeat属性定义了图像的平铺模式。css可以使用background-repeat属性设置图片背景不平铺。从原图像开始重复,原图像由 ...
  • css中背景图不平铺怎么设置呢?css中背景图平铺模式使用background-repeat属性来设置,设置background-repeat:no-repeat样式即可使背景图不平铺。示例:body{background-image: url('/i/eg_bg_03.gif');...
  • css可以使用background-repeat属性设置图片不重复,background-repeat属性设置是否及如何重复背景图像。默认地,背景图像在水平和垂直方向上重复。background-repeat 属性介绍:background-repeat 属性定义了图像的...
  • 但是css3出现以后,这个重复显示的情况被改善了。background-size 属性可以让我们之前的让背景图片拉伸填充的希望成真,具体使用方法如下感兴趣的朋友可以参考下哈,希望对大家有所帮助 如何让背景图片拉伸填充,这...
  • css图像不重复的设置方法:首先创建一个HTML示例文件;然后引入一张背景图片;最后通过设置属性为“background-...css可以使用background-repeat属性设置图片不重复,background-repeat属性设置是否及如何重复背...
  • css可以使用background-repeat属性设置图片不重复,background-repeat属性设置是否及如何重复背景图像。默认地,背景图像在水平和垂直方向上重复。background-repeat 属性介绍:background-repeat 属性定义了图像的...
  • css设置背景图片,默认的样式是图片重复,有的时候页面只需要一个不重复的背景图片,这就需要使用到css背景图片重复属性background-repeat: no-repeat;进行设置。css使用background-repeat设置背景图片不重复和不...
  • 这个背景的长宽值在css2.1之前是能被修改的。所以实际的结果是只能重复显示,所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来控制背景图片的显示的。所以一般用作背景图片的有2类:1.是一整张大...
  • 在网页设计的过程中,我们添加的背景会自动平铺,然而有时我们为背景设置一张图片想让其平铺该怎么做呢?下面我们来看一下css设置背景不平铺的方法。我们首先来看一下css设置背景图片平铺方式。repeat:即默认方式...
  • CSS中,可以使用background(背景)属性来添加图片,默认图片是向x轴和y轴重复。那么css如何将图片横向平铺?下面本篇文章就来给大家介绍一下使用CSS将图片横向平铺的方法,希望对大家有所帮助。在CSS中,可以使用...
  • CSS中,可以使用background-repeat属性来设置图片平铺方式。下面本篇文章就来给大家介绍一下CSS background-repeat属性,希望对大家有所帮助。...no-repeat:在X及Y轴方向均不平铺;repeat-x:横向平...
  • css设置背景图片不重复显示

    万次阅读 2019-01-20 17:16:24
    最近在项目中做菜单管理这块,每个一级菜单都有背景图(图片宽高都很小),设置完图片后,背景图重复显示,后来查阅资料才明白,原来设置完背景图后,指定平铺属性,默认是横向纵向重复的,导致图片出现重复,指定...
  • 可以这样设定背景: 1、<body style="background-image: url("图片文件地址");...2、使图在任何大小的屏幕都不会显示重复,可以这样设定背景(图像不平铺): <body style="background-image: url...
  • css设置背景图片,默认的样式是图片重复,有的时候页面只需要一个不重复的背景图片,这就需要使用到css背景图片重复属性background-repeat: no-repeat;进行设置。background-repeat属性background-repeat 属性设置...
  • css 实现背景图片平铺效果

    千次阅读 2021-01-04 15:57:46
    //不重复 background-size: 100% 100%; // 满屏 } div{backgroud-image:url(images/bg.gif);} <!-- 默认 --> 其他平铺方式: repeat:即默认方式,完全平铺背景; no-repeat:在X及Y轴方向均不平铺
  • css 实现背景图片平铺整个屏幕 #app{ background-image: url(" img/1.jpg "); background-repeat: no-repeat; //不重复 background-size: 100% 100%; // 满屏 }
  • css如何将图片横向平铺

    千次阅读 2020-07-15 10:12:42
    css中,可以使用background(背景)属性来添加图片,默认图片是向x轴和y轴重复。那么css如何将图片横向平铺?下面本篇文章就来给大家介绍一下使用css将图片横向平铺的方法,希望对大家有所帮助。 在css中,可以...
  • CSS图片平铺的几种方式

    千次阅读 2020-02-19 22:56:44
    文章目录1. 要解决的问题?解决方法一解决方法二: 1. 要解决的问题? 图片平铺 ...注意css中单行注释能用,是错误的。 注意:如果写background复合属性,某些属性可能会被顶掉,如图2 解释: ...
  • css中no-repeat一般用在元素backgroud-repeat的设置中,含义为不平铺;一般与background-image 一起使用;此图片做背景时不平铺;另外还有几个其他值:repeat:平铺repeat-x:横向平铺repeat-y:纵向平铺...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,826
精华内容 2,730
关键字:

平铺不重复css