精华内容
下载资源
问答
  • 想必有很多的朋友都不知道CSS里的no-repeat是什么意思吧,其实很好理解的CSS里的 no-repeat是针对背景图片来说的,不会出现平铺或者重复的现象
  • js控制背景不重复的代码
  • background-repeat: no-repeat;

    千次阅读 2020-03-27 16:11:39
    单独使用no-repeat可以使图片显示出来 但是使用background-image: url(…/images/guitarist.gif) no-repeat;这种方式就会使图片隐藏。 自己想了一下也许是因为如果用快捷方式设置背景不重复也许是因为图片的作用域...

    今天重新复习Dom编程艺术最后一章发现使用
    在这里插入图片描述
    单独使用no-repeat可以使图片显示出来
    在这里插入图片描述
    但是使用background-image: url(…/images/guitarist.gif) no-repeat;这种方式就会使图片隐藏。

    在这里插入图片描述
    自己想了一下也许是因为如果用快捷方式设置背景不重复也许是因为图片的作用域方面的问题,它的目标是图片
    而设置background-repeat: no-repeat; 是因为它的目标是header

    展开全文
  • no-repeat案例

    千次阅读 2019-04-26 17:52:25
    no-repeat x xp y xp -x表示上方移动x个xp, x表示下方移动x个xp, -y表示左方移动x个xp, -y表示右方移动x个xp, 1一张图片有许多图像,图像都规则的显出 2.网站先出来如图所示 <!DOCTYPE html> <...

    理解

    no-repeat x  xp y xp    -x表示上方移动x个xp, x表示下方移动x个xp, -y表示左方移动x个xp, -y表示右方移动x个xp,

    1一张图片有许多图像,图像都规则的显出

    2.网站先出来如图所示

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>样式2</title>
    		
    		<style type="text/css">
    			
    			li{
    				list-style: none;
    				float: left;
    				width: 70px;
    				height: 32px;
    				line-height: 32px;
    				font-size: 12px;
    			}
    			.btn{
    				width: 42px;
    			
    				background: url(img/icon.png) no-repeat -39px 2px;
    				text-align: center;
    			}
    			
    			.pic{
    				width: 25px;
    				background: url(img/icon.png) no-repeat 0 3px;
    			}
    			.pic2{
    				width: 25px;
    				background: url(img/icon.png) no-repeat 0 -47px;
    			}
    			.pic3{
    				width: 25px;
    				background: url(img/icon.png) no-repeat 0 -105px;
    			}
    			.pic4{
    				width: 25px;
    				background: url(img/icon.png) no-repeat 0 -153px;
    			}
    		</style>
    	</head>
    	<body>		
            <ul>
            	<li class="pic"></li>
            	<li>购物车</li>
            	<li class="pic2"></li>
            	<li>帮助中心</li>
            	<li class="pic3"></li>
            	<li>加入收藏</li>
            	<li class="pic4"></li>
            	<li>设为首页</li>
            	<li class="btn">登录</li>
            	<li style="width: 5px;"></li>
            	<li class="btn">注册</li>
            </ul>
    	</body>
    </html>
    

     

    展开全文
  • CSS里的 no-repeat 是什么意思

    千次阅读 2019-09-15 14:13:32
    简单来说,CSS里的 no-repeat是针对背景图片来说的。当你设置了no-repeat这个属性后,你的背景图片将不会被重复,再换一种说法,你在网站上所看到的背景图片就是你所添加的图片, 不会出现平...

    简单来说,CSS里的 no-repeat是针对背景图片来说的。当你设置了no-repeat这个属性后,你的背景图片将不会被重复,再换一种说法,你在网站上所看到的背景图片就是你所添加的图片, 不会出现平铺或者重复的现象。

     

    来自:https://zhidao.baidu.com/question/358904000.html

    展开全文
  • ="background:repeat-x 0px 50px url(zf.jpg);" > 39 3.repeat-x 0px 50px url(zf.jpg); 40 div > 41   42 < div style ="background:repeat 25px 25px url(zf.jpg);" > 43 4.repeat 25...

    自http://blog.sina.com.cn/s/blog_98eef7830101cv8t.html获取的知识,特此感谢。

     1 <!DOCTYPE html>
     2 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <meta charset="utf-8" />
     5     <title>New Document</title>
     6     <meta name="generator" content="EverEdit" />
     7     <meta name="author" content="" />
     8     <meta name="keywords" content="" />
     9     <meta name="description" content="" />
    10     <style type="text/css">
    11         div{
    12             width:400px; 
    13             height:200px;
    14             padding:8px; 
    15             border:1px solid #96c2f1;
    16         }
    17     </style>
    18 </head>
    19 <body>
    20     <div style="width:200px; height:100px; border: 1px solid #ff0000;">
    21     </div>
    22     &nbsp;
    23     <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff;width:400px">
    24         <img alt="pic" src="zf.jpg">
    25     </div>
    26     &nbsp;
    27     <div style="background:url(zf.jpg);">
    28     </div>
    29     &nbsp;
    30     <div style="background:repeat-x url(zf.jpg);">
    31         1.repeat-x url(zf.jpg);
    32     </div>
    33     &nbsp;
    34     <div style="background:repeat-y url(zf.jpg);">
    35         2.repeat-y url(zf.jpg);
    36     </div>
    37     &nbsp;
    38     <div style="background:repeat-x 0px 50px url(zf.jpg);">
    39         3.repeat-x 0px 50px url(zf.jpg);
    40     </div>
    41     &nbsp;
    42     <div style="background:repeat 25px 25px url(zf.jpg);">
    43         4.repeat 25px 25px url(zf.jpg);
    44     </div>
    45     &nbsp;
    46     <div style="background:repeat-x bottom url(zf.jpg);">
    47         5.repeat-x bottom url(zf.jpg);
    48     </div>
    49     &nbsp;
    50     <div style="background:repeat-x left url(zf.jpg);">
    51         6.repeat-x left url(zf.jpg);
    52     </div>
    53     &nbsp;
    54     <div style="background:no-repeat url(zf.jpg);">
    55         7.no-repeat url(zf.jpg);
    56     </div>
    57     &nbsp;
    58     <div style="background:no-repeat top  url(zf.jpg);">
    59         8.no-repeat top url(zf.jpg);
    60     </div>
    61     &nbsp;
    62     <div style="background:no-repeat left url(zf.jpg);">
    63         9.no-repeat left url(zf.jpg);
    64     </div>
    65     &nbsp;
    66     <div style="background:no-repeat left 100px url(zf.jpg);">
    67         10.no-repeat left 100px url(zf.jpg);靠左边,则左为0,x坐标取0,只写上下
    68     </div>
    69     &nbsp;
    70     <div style="background:no-repeat right 100px url(zf.jpg);">
    71         11.no-repeat right 100px url(zf.jpg);靠左边,则左为0,x坐标取0,只写上下
    72     </div>
    73     &nbsp;
    74     <div style="background:no-repeat 100px bottom url(zf.jpg);">
    75         12.no-repeat 100px bottom url(zf.jpg);靠下(代表上下),所以只用写左右,100px
    76     </div>
    77     &nbsp;
    78     <div style="background:no-repeat -50px 50px url(zf.jpg);">
    79         13.no-repeat -50px 50px url(zf.jpg);距离左边-50px,上边50px
    80     </div>
    81     &nbsp;
    82     <div style="background:no-repeat -50px  url(zf.jpg);">
    83         14.no-repeat -50px 距离左边-50px,上下默认,居中
    84     </div>
    85     &nbsp;
    86     <div style="background:no-repeat -50px  top url(zf.jpg);">
    87         15.no-repeat -50px  top = no-repeat -50px 0px (距离div边界左边-50,上边0px)
    88     </div>
    89     &nbsp;
    90     <div style="background:no-repeat left  top url(zf.jpg);">
    91         16.no-repeat left  top (靠左上,=(0px,0px),=只有no-repeat
    92     </div>
    93 </body>
    94 </html>

     

     这是使用的图片100px*100px,每个小方块是50px*50px。以下是效果图。

    ********************************************************************************

     
     
    pic
     
     
     
    1.repeat-x url(zf.jpg);
     
    2.repeat-y url(zf.jpg);
     
    3.repeat-x 0px 50px url(zf.jpg);
     
    4.repeat 25px 25px url(zf.jpg);
     
    5.repeat-x bottom url(zf.jpg);
     
    6.repeat-x left url(zf.jpg);
     
    7.no-repeat url(zf.jpg);
     
    8.no-repeat top url(zf.jpg);
     
    9.no-repeat left url(zf.jpg);
     
    10.no-repeat left 100px url(zf.jpg);靠左边,则左为0,x坐标取0,只写上下
     
    11.no-repeat right 100px url(zf.jpg);靠左边,则左为0,x坐标取0,只写上下
     
    12.no-repeat 100px bottom url(zf.jpg);靠下(代表上下),所以只用写左右,100px
     
    13.no-repeat -50px 50px url(zf.jpg);距离左边-50px,上边50px
     
    14.no-repeat -50px 距离左边-50px,上下默认,居中
     
    15.no-repeat -50px top = no-repeat -50px 0px (距离div边界左边-50,上边0px)
     
    16.no-repeat left top (靠左上,=(0px,0px),=只有no-repeat

    转载于:https://www.cnblogs.com/carazk/p/6178474.html

    展开全文
  • css中no-repeat一般用在元素backgroud-repeat的设置中,含义为不平铺;一般与background-image 一起使用;此图片做背景时不平铺;另外还有几个其他值:repeat:平铺repeat-x:横向平铺repeat-y:纵向平铺...
  • html中hover和no-repeat

    千次阅读 2018-11-23 11:57:33
    no-repeat:调像素,后边紧跟的是调动的x轴y轴的值。 1.最基本的 当鼠标滑上文字文字变色。 a:hover{ color:red; } 像这种给文字一个超链接,然后再写一个伪类实现你想要实现的效果。 1.当鼠标滑上时出现红....
  • 以左上角为(0,0)的坐标做一个偏移 第一个数字是X轴上的偏移量,也就是横向的偏移量,正表示向右,负表示向左! 第二个数字是Y轴上的偏移量,也就是横向的偏移量,正表示向下,负表示向上! 1、意思不同。...
  • no-repeat 失效

    千次阅读 2017-08-24 01:32:32
    background-image:url(../images/close.png) no-repeat; /*显示小图*/  最后的结果无效,图片消失不见,如果改为如下 background-image:url(../images/close.png); /*显示小图*/  结果为布满多个图片 如果改为...
  • 最近在模仿一个网页的时候,发现CSS代码里有一行代码:background:url(图片) no-repeat right center不明白是什么意思,百度以后学习到了,在此记载知识点; 这一行代码其实是背景图定义形式的简写完整形式是:...
  • } 在不写repeatno-repeat的情况下,默认的是平铺。repeat平铺的效果,就是一张图,可以铺满整个屏幕。效果图如下: 然后我在#ban { margin:auto; width:500px; height:500px;border:2px dotted black; ...
  • background:url(./images.png) no-repeat 0 center; //图像地址 不重复 水平位置0 垂直位置居中 background:url(./images.png) no-repeat -10px -5px; background:url(./images.png) no-repeat 0 center; 的...
  • 注意repeat-y与repeat-x结果相似。只能用repeat-y bottom/top,否则出错 10.no-repeat  no-repeat url(test.jpg)   "> no-repeat top no-repeat ...
  • 最近一直纠结CSS里面no-repeat后面两个数字的意思,百度上查了好多,发现每个人的理解都是不一样的,而且在不知道什么意思的情况下,看到不同人的解读,最后依然找不到正确的答案; 研究了很久,在此归纳: 以此为...
  • .nobgrepeat{background:url(背景图片地址) left top no-repeat;} (2)也可以设置背景图片的高宽,要与背景图片的大小一样 注意:但是有时候加了 no-repeate之后,图片就会不见了,这种情况...
  • background:url(../images/list01.png) no-repeat 0 center; 的意思是 图像地址 不重复 水平位置0 垂直位置居中 background:url(../images/bg.png) no-repeat -4px -3px; 这里面的后面两个值是什么...
  • background:url(../images/list01.png) no-repeat 0 center; 的意思是 图像地址 不重复 水平位置0 垂直位置居中 0 center 的意思就是 水平位置0 垂直位置居中 -4px -3px 的意思就是 水平位置-4px 垂直位置-3px 这...
  • css no-repeat后面的数字是什么意思?

    千次阅读 2015-01-06 11:26:20
    css no-repeat后面的数字是什么意思,比如css no-repeat 0 0,css no-repeat -8px 0。  css no-repeat后面的数字是什么意思,比如css no-repeat 0 0,css no-repeat -8px 0。  背景图片的位置,那两个数字是...
  •  background: #F3F2E2 url(1234.png) no-repeat; } .box1 {  background-position:0% 0%; } .box2 {  background-position:0% 33.33333%; } .box3 {  background-position:0% 66....
  • 在build/utils.js文件中添加: 文件即解决
  • background-repeat: no-repeat, repeat;  } 尝试一下 » 可以给不同的图片设置多个不同的属性 实例 #example1 {  background: url(img_flwr.gif) right bottom no-repeat,...
  • CSS里的 no-repeat

    千次阅读 2013-06-27 15:17:00
    简单来说,CSS里的 no-repeat是针对背景图片来说的。当你设置了no-repeat这个属性后,你的背景图片将不会被重复,再换一种说法,你在网站上所看到的背景图片就是你所添加的图片, 不会出现平铺或者重复的现象。当然...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 152,441
精华内容 60,976
关键字:

no-repeat