精华内容
下载资源
问答
  • background

    千次阅读 2016-04-26 16:47:38
    background: repeating-radial-gradient(red,blue 20px,red 40px); } background 语法: background:[ < bg-layer > , ]* < final-bg-layer > < bg-layer > = < bg-image > || < ...

    radial-gradient()

    语法:
    <radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)
    <position> = [ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?
    <shape> = circle | ellipse
    <size> = <extent-keyword> | [ <circle-size> || <ellipse-size> ]
    <extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner
    <circle-size> = <length>
    <ellipse-size> = [ <length> | <percentage> ]{2}
    <shape-size> = <length> | <percentage>
    <color-stop> = <color> [ <length> | <percentage> ]?
    取值:
    <position> 确定圆心的位置。如果提供2个参数,第一个表示横坐标,第二个表示纵坐标;如果只提供一个,第二值默认为50%,即center
    <percentage>①:
    用百分比指定径向渐变圆心的横坐标值。可以为负值。
    <length>①:
    用长度值指定径向渐变圆心的横坐标值。可以为负值。
    left:
    设置左边为径向渐变圆心的横坐标值。
    center①:
    设置中间为径向渐变圆心的横坐标值。
    right:
    设置右边为径向渐变圆心的横坐标值。
    <percentage>②:
    用百分比指定径向渐变圆心的纵坐标值。可以为负值。
    <length>②:
    用长度值指定径向渐变圆心的纵坐标值。可以为负值。
    top:
    设置顶部为径向渐变圆心的纵坐标值。
    center②:
    设置中间为径向渐变圆心的纵坐标值。
    bottom:
    设置底部为径向渐变圆心的纵坐标值。
    <shape> 确定圆的类型
    circle:
    指定圆形的径向渐变
    ellipse:
    指定椭圆形的径向渐变。
    <extent-keyword> circle | ellipse 都接受该值作为 size
    closest-side:
    指定径向渐变的半径长度为从圆心到离圆心最近的边
    closest-corner:
    指定径向渐变的半径长度为从圆心到离圆心最近的角
    farthest-side:
    指定径向渐变的半径长度为从圆心到离圆心最远的边
    farthest-corner:
    指定径向渐变的半径长度为从圆心到离圆心最远的角
    <circle-size> circle 接受该值作为 size
    <length>:
    用长度值指定正圆径向渐变的半径长度。不允许负值。
    <ellipse-size> ellipse 接受该值作为 size
    <length>:
    用长度值指定椭圆径向渐变的横向或纵向半径长度。不允许负值。
    <percentage>:
    用百分比指定椭圆径向渐变的横向或纵向半径长度。不允许负值。
    <color-stop> 用于指定渐变的起止颜色:
    <color>:
    指定颜色。
    <length>:
    用长度值指定起止色位置。不允许负值
    <percentage>:
    用百分比指定起止色位置。不允许负值
    
    .demo-1{
            background: radial-gradient(red,blue);
        }
    
    <div class="demo demo-1"></div>

    这里写图片描述

    .demo-2{
            background: radial-gradient(circle,red,blue);
        }
    <div class="demo demo-2"></div>

    这里写图片描述

    .demo-3{
            background: radial-gradient(circle 100px,red,blue);
        }
    <div class="demo demo-3"></div>

    这里写图片描述

    
    
    .demo-4{
            background: radial-gradient(closest-side,red,blue);
        }
    <div class="demo demo-4"></div>

    这里写图片描述

    .demo-5{
    background: radial-gradient(100px 50px,red,blue);
    }

    这里写图片描述

    .demo-6{
            background: radial-gradient(100px 50px at 0 0,red,blue);
        }
    <div class="demo demo-6"></div>

    这里写图片描述

    .demo-7{
    background: radial-gradient(red,green 20%,blue);
    }

    这里写图片描述

    
    
    
    

    附代码:




    背景


    .demo-1{
    background: radial-gradient(red,blue);
    }
    .demo-2{
    background: radial-gradient(circle,red,blue);
    }
    .demo-3{
    background: radial-gradient(circle 100px,red,blue);
    }
    .demo-4{
    background: radial-gradient(closest-side,red,blue);
    }
    .demo-5{
    background: radial-gradient(100px 50px,red,blue);
    }
    .demo-6{
    background: radial-gradient(100px 50px at 0 0,red,blue);
    }
    .demo-7{
    background: radial-gradient(red,green 20%,blue);
    }











    
    --------------------------------------------------------------------------
    
    linear-gradient()
    -----------------

    语法:
    = linear-gradient([ [ | to ] ,]? [, ]+)
    = [left | right] || [top | bottom]
    = [ | ]?
    取值:
    下述值用来表示渐变的方向,可以使用角度或者关键字来设置:

    用角度值指定渐变的方向(或角度)。
    to left:
    设置渐变为从右到左。相当于: 270deg
    to right:
    设置渐变从左到右。相当于: 90deg
    to top:
    设置渐变从下到上。相当于: 0deg
    to bottom:
    设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。
    用于指定渐变的起止颜色:

    指定颜色。

    用长度值指定起止色位置。不允许负值

    用百分比指定起止色位置。

    ```
    .demo-1{
            background: linear-gradient(red,blue 20px,red 40px);
        }
        .demo-2{
            background: repeating-linear-gradient(red,blue 20px,red 40px);
        }
    

    这里写图片描述


    radial-gradient()

    语法:
    <radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)
    <position> = [ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?
    <shape> = circle | ellipse
    <size> = <extent-keyword> | [ <circle-size> || <ellipse-size> ]
    <extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner
    <circle-size> = <length>
    <ellipse-size> = [ <length> | <percentage> ]{2}
    <shape-size> = <length> | <percentage>
    <color-stop> = <color> [ <length> | <percentage> ]?
    取值:
    <position> 确定圆心的位置。如果提供2个参数,第一个表示横坐标,第二个表示纵坐标;如果只提供一个,第二值默认为50%,即center
    <percentage>①:
    用百分比指定径向渐变圆心的横坐标值。可以为负值。
    <length>①:
    用长度值指定径向渐变圆心的横坐标值。可以为负值。
    left:
    设置左边为径向渐变圆心的横坐标值。
    center①:
    设置中间为径向渐变圆心的横坐标值。
    right:
    设置右边为径向渐变圆心的横坐标值。
    <percentage>②:
    用百分比指定径向渐变圆心的纵坐标值。可以为负值。
    <length>②:
    用长度值指定径向渐变圆心的纵坐标值。可以为负值。
    top:
    设置顶部为径向渐变圆心的纵坐标值。
    center②:
    设置中间为径向渐变圆心的纵坐标值。
    bottom:
    设置底部为径向渐变圆心的纵坐标值。
    <shape> 确定圆的类型
    circle:
    指定圆形的径向渐变
    ellipse:
    指定椭圆形的径向渐变。
    <extent-keyword> circle | ellipse 都接受该值作为 size
    closest-side:
    指定径向渐变的半径长度为从圆心到离圆心最近的边
    closest-corner:
    指定径向渐变的半径长度为从圆心到离圆心最近的角
    farthest-side:
    指定径向渐变的半径长度为从圆心到离圆心最远的边
    farthest-corner:
    指定径向渐变的半径长度为从圆心到离圆心最远的角
    <circle-size> circle 接受该值作为 size
    <length>:
    用长度值指定正圆径向渐变的半径长度。不允许负值。
    <ellipse-size> ellipse 接受该值作为 size
    <length>:
    用长度值指定椭圆径向渐变的横向或纵向半径长度。不允许负值。
    <percentage>:
    用百分比指定椭圆径向渐变的横向或纵向半径长度。不允许负值。
    <color-stop> 用于指定渐变的起止颜色:
    <color>:
    指定颜色。
    <length>:
    用长度值指定起止色位置。不允许负值
    <percentage>:
    用百分比指定起止色位置。不允许负值
    .demo-3{
            background: radial-gradient(red,blue 20px,red 40px);
        }
        .demo-4{
            background: repeating-radial-gradient(red,blue 20px,red 40px);
        }

    这里写图片描述


    background

    语法:
    background:[ <bg-layer>, ]* <final-bg-layer>
    <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
    <final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <' background-color '>
    默认值:看每个独立属性
    适用于:所有元素
    继承性:无
    动画性:看每个独立属性
    计算值:看每个独立属性
    取值:
    <' background-image '>:
    指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”
    <' background-position '>:
    指定对象的背景图像位置。
    <' background-size '>:
    指定对象的背景图像的尺寸大小。
    <' background-repeat '>:
    指定对象的背景图像如何铺排填充。
    <' background-attachment '>:
    指定对象的背景图像是随对象内容滚动还是固定的。
    <' background-origin '>:
    指定对象的背景图像显示的原点。
    <' background-clip '>:
    指定对象的背景图像向外裁剪的区域。
    <' background-color '>:
    指定对象的背景颜色。
    
    .demo{
            width:555px;height:123px;
            background-image: url(red.png);
        }
        .demo-1{
            background-repeat: repeat-x ;
        }
        .demo-2{
            background-repeat: repeat-y ;
        }
        .demo-3{
            background-repeat: space ;
        }
        .demo-4{
            background-repeat: round ;
        }
        .demo-5{
            background-repeat: no-repeat ;
        }
    <div class="demo demo-1"></div>
    <div class="demo demo-2"></div>
    <div class="demo demo-3"></div>
    <div class="demo demo-4"></div>
    <div class="demo demo-5"></div>

    这里写图片描述
    这里写图片描述


    background-position

    语法:
    background-position:<position> [ , <position> ]*
    <position> = [ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
    默认值:0% 0%,效果等同于left top
    适用于:所有元素
    继承性:无
    动画性:是
    计算值:指定值
    取值:
    <percentage>:
    用百分比指定背景图像填充的位置。可以为负值。
    <length>:
    用长度值指定背景图像填充的位置。可以为负值。
    center:
    背景图像横向和纵向居中。
    left:
    背景图像在横向上填充从左边开始。
    right:
    背景图像在横向上填充从右边开始。
    top:
    背景图像在纵向上填充从顶部开始。
    bottom:
    背景图像在纵向上填充从底部开始。
    .demo{
            background-image: url(red.png);
            background-repeat: no-repeat;
        }
        .demo-1{
            background-position: 10px 20px ;
        }
        .demo-2{
            background-position: 10px ;
        }
        .demo-3{
            background-position: 50% 20% ;
        }
        .demo-4{
            background-position: 50% 50% ;
        }
        .demo-5{
            background-position: center ;
        }
    
    
    <div class="demo demo-1"></div>
    <div class="demo demo-2"></div>
    <div class="demo demo-3"></div>
    <div class="demo demo-4"></div>
    <div class="demo demo-5"></div>

    这里写图片描述
    这里写图片描述
    这里写图片描述

    background-attachment

    语法:
    background-attachment:<attachment> [ , <attachment> ]*
    <attachment> = fixed | scroll | local
    默认值:scroll
    适用于:所有元素
    继承性:无
    动画性:否
    计算值:指定值
    取值:
    fixed:
    背景图像相对于窗体固定。
    scroll:
    背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
    local:
    背景图像相对于元素内容固定,也就是说当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。(CSS3)
    说明:
    设置或检索背景图像是随对象内容滚动还是固定的。必须先指定 <' background-image '> 属性。
    对应的脚本特性为backgroundAttachment。
    

    .demo{
            overflow: auto;
            background-image: url(red.png);
            background-repeat: repeat;
        }
        .demo-1{
            background-attachment: scroll;/*背景随滚动条滚动*/
        }
        .demo-2{
            background-attachment: local;/*背景不随滚动条滚动*/
        }
        .demo-3{
            background-attachment: fixed;/*网易云课堂说很少用*/
        }
    <div class="demo demo-1">
        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
    </div>
    <div class="demo demo-2">
        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
    </div>
    <div class="demo demo-3">
        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
    </div>
    
    展开全文
  • backgroundbackground-image

    千次阅读 2019-04-11 14:34:38
    background background 简写属性在一个声明中设置所有的背景属性。 可以设置如下属性: background-color background-position background-size background-repeat background-origin background-clip ...

    background

    background 简写属性在一个声明中设置所有的背景属性。

    可以设置如下属性:

    • background-color
    • background-position
    • background-size
    • background-repeat
    • background-origin
    • background-clip
    • background-attachment
    • background-image

    如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。

    通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。

    background-image

    background-image 属性为元素设置背景图像。

    一个是设置背景属性,一个是设置背景图像,以后不要在迷糊二者的区别了,

     

    展开全文
  • background详解

    万次阅读 2020-04-19 11:18:23
    调用示例 <template> <view> <...-- 文字滚动 -->...scrollMess text="这是 NoticeBar 通告栏,这是 NoticeBar 通告栏,这... :speed="100" background-color="#fffbe8" color="#de8c17" ...

    background-position

    • 为每一个背景图片设置初始位置。 这个位置是相对于由 background-origin 定义的位置图层的。
    • 如果设置一个值, 则该值作用在横坐标上, 纵坐标默认为 50%(即 center) ;
    • 如果设置两个值, 则第一个值作用于横坐标, 第二个值作用于纵坐标, 取值可以是方位关键字 left\top\center\right\bottom, 如 background-position: left center ; 也可以是百分比或长度, 百分比和长度可为设置为负值, 如: background-position: 10% 30px
    • 另外 css3 支持3个值或者4个值, 注意如果设置3个或4个值, 偏移量前必须有关键字, 如: background-position: right 20px bottom 30px;

    示例代码

    <html>
    <div style="display: flex;justify-content: space-around;background: lightcyan;flex-wrap: wrap ">
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 no-repeat;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px;box-sizing: content-box">
    		background-position:0 0
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 no-repeat;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-position:0
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) top no-repeat;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-position:top
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) left no-repeat;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-position:left
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) center no-repeat;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-position:center
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 10px 50% no-repeat;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-position:10px 50%
    	</div>
    </div>
    </html> 

    background-size

    • 设置背景图片大小。图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
    • cover: 缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。和 contain 值相反, cover 值尽可能大的缩放背景图像并保持图像的宽高比例(图像不会被压扁)。 该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时,背景图的 左/右 或者 上/下 部分会被裁剪。
    • contain: 缩放背景图片以完全装入背景区,可能背景区部分空白。 contain 尽可能的缩放背景并保持图像的宽高比例(图像不会被压缩)。 该背景图会填充所在的容器。当背景图和容器的大小的不同时, 容器的空白区域(上/下或者左/右)会显示由 background-color 设置的背景颜色。
    • 如果仅有一个数值被给定,这个数值将作为宽度值大小,高度值将被设定为 auto。 如果有两个数值被给定,第一个将作为宽度值大小,第二个作为高度值大小。

    示例代码

    <html>
    <div style="display: flex;justify-content: space-around;background: lightcyan;flex-wrap: wrap ">
    	<div style="background: black url(https://miofly.gitee.io/res/img/me/gzh_one.png) 0 0/contain no-repeat;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-size:contain
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/me/gzh_one.png) 0 0/cover no-repeat;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-size:cover
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/me/gzh_one.png) 0 0/120px no-repeat;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-size:120px
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/me/gzh_one.png) 0 0/120px 100px no-repeat;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-size:120px 100px
    	</div>
    </div>
    </html> 

    background-origin

    • 规定了指定背景图片 background-image 属性的原点位置的背景相对区域.
    • 注意:当使用 background-attachmentfixed 时,该属性将被忽略不起作用。
    • 初始值:padding-box
      • border-box:背景图片的摆放以 border 区域为参考
      • padding-box:背景图片的摆放以 padding 区域为参考
      • content-box:背景图片的摆放以 content 区域为参考
    <html>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <div style="display: flex;justify-content: space-around;background: lightcyan;flex-wrap: wrap ">
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 no-repeat padding-box;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px;
    	border: 30px solid mediumvioletred;padding: 10px;box-sizing: content-box">
    		padding-box
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 no-repeat content-box;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px;
    	border: 30px solid mediumvioletred;padding: 10px;box-sizing: content-box">
    		content-box
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 no-repeat border-box;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px;
    	border: 30px solid mediumvioletred;padding: 10px;box-sizing: content-box">
    		border-box
    	</div>
    </div>
    </html> 

    background-clip

    • 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面
    • 如果没有设置背景图片(background-image)或背景颜色(background-color), 那么这个属性只有在边框( border)被设置为非固实(soild)、透明或半透明时才能看到视觉效果 (与 border-styleborder-image 有关),否则,本属性产生的样式变化会被边框覆盖。
    • 初始值:padding-box
      • border-box:背景延伸至边框外沿(但是在边框下层)。
      • padding-box:背景延伸至内边距(padding)外沿。不会绘制到边框处。
      • content-box:背景被裁剪至内容区(content box)外沿。

    <html>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <div style="display: flex;justify-content: space-around;background: lightcyan;flex-wrap: wrap ">
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 no-repeat padding-box padding-box;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px;
    	border: 30px solid mediumvioletred;padding: 10px;box-sizing: content-box">
    		background-clip:padding-box
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 no-repeat padding-box content-box;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px;
    	border: 30px solid mediumvioletred;padding: 10px;box-sizing: content-box">
    		background-clip:content-box
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 no-repeat padding-box border-box;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px;
    	border: 30px solid mediumvioletred;padding: 10px;box-sizing: content-box">
    		background-clip:border-box
    	</div>
    </div>
    </html> 

    background-attachment

    • scroll:默认值,背景图相对于元素固定,背景随页面滚动而移动,即背景和内容绑定。
      • 对于 scroll,一般情况背景随内容滚动,但是有一种情况例外。 对于可以滚动的元素(设置为 overflow:scroll 的元素)。 当 background-attachment 设置为 scroll 时,背景图不会随元素内容的滚动而滚动。
    • fixed:背景图相对于视口固定,所以随页面滚动背景不动,相当于背景被设置在了 body 上。
    • local:背景图相对于元素内容固定。
    <html>
    <div class="div1" style="padding: 30px;border: 10px solid red;color: #ff0000;margin-top:10px;
    background: #fff url(https://miofly.gitee.io/res/img/test/small.png) no-repeat fixed 0 0;;float: left">
    </div>
    <div class="div1" style="padding: 30px;border: 10px solid red;color: #ff0000;margin-top:10px;
    background: #fff url(https://miofly.gitee.io/res/img/test/small.png) no-repeat scroll 0 0;float: left">
    </div>
    <div class="div1"  style="padding: 30px;border: 10px solid red;color: #ff0000;margin-top:10px;
    background: #fff url(https://miofly.gitee.io/res/img/test/small.png) no-repeat local 0 0;float: left">
    </div>
    <script>
    	const div1 = document.getElementsByClassName('div1')
    	for (let i = 0; i < 20; i++) {
    		div1[0].innerHTML = div1[0].innerHTML + '测试代码<br>'
    		div1[1].innerHTML = div1[1].innerHTML + '测试代码<br>'
    		div1[2].innerHTML = div1[2].innerHTML + '测试代码<br>'
    	}
    </script>
    </html>
    

    background-repeat

    定义背景图像的重复方式。背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。

    作用
    repeat图像会按需重复来覆盖整个背景图片所在的区域. 最后一个图像会被裁剪, 如果它的大小不合适的话.
    space图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间. background-position属性会被忽视, 除非只有一个图像能被无裁剪地显示. 只在一种情况下裁剪会发生, 那就是图像太大了以至于没有足够的空间来完整显示一个图像.
    round随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间. 例如, 一个图像原始大小是260px, 重复三次之后, 可能会被伸展到300px, 直到另一个图像被加进来. 这样他们就可能被压缩到225px.
    no-repeat图像不会被重复
    <html>
    <div style="display: flex;justify-content: space-around;background: lightcyan;flex-wrap: wrap ">
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 no-repeat;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-repeat:no-repeat
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 repeat;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-position:repeat
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 repeat-x;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-position:repeat-x
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 repeat-y;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-position:repeat-y
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 space;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-position:space
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 round;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-position:round
    	</div>
    </div>
    </html>
    

    注意点

    • background-positionbackground-size 属性, 之间需使用/分隔, 且 position 值在前, size 值在后。
    • 如果同时使用 background-originbackground-clip 属性, origin 属性值需在 clip 属性值之前, 如果 originclip 属性值相同, 则可只设置一个值。
    • background-image: 设置背景图像, 可以是真实的图片路径, 也可以是创建的渐变背景;

    多个图片设置

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    </head>
    <body>
    <style>
    	.bg-test{
    		background-image: url("https://miofly.gitee.io/res/img/glnz/0.jpg"), url("https://miofly.gitee.io/res/img/glnz/1.jpg");
    		background-position: left, right;
    		background-size: contain, 150px 50px;
    		background-repeat: no-repeat, no-repeat;
    		background-color: red;
    	}
    </style>
    <div class="bg-test">
    	这是一段文字,有两个背景图片
    </div>
    </body>
    </html>
    

     

    展开全文
  • background:no-repeat scroll 56px 78px / 69px 69px rgba(0, 0, 0, 0); background:no-repeat scroll 56px 78px(background-position)/(分割线) *69px 69px *(background-size ) rgba(0, 0, 0, 0); ...

    background:no-repeat scroll 56px 78px / 69px 69px rgba(0, 0, 0, 0);

    background:no-repeat scroll 56px 78px(background-position)/(分割线) *69px 69px *(background-size ) rgba(0, 0, 0, 0);

    展开全文
  • background-color和background-image问题

    千次阅读 2019-09-17 08:37:52
    今天撸码的时候发现需要background-color和background-image 一起用,才开始考虑两个可不可以一起用 查阅多方资料才知道可以写成background:color url()...
  • background简写

    千次阅读 2018-05-07 10:35:24
    background是一个简写属性 background: color image position/size repeat origin clip attachment initial | inherit; 它的展开式属性为: background-color/*背景颜色(CSS1)*/ background-image/*背景图片...
  • backgroundbackground-color的区别

    千次阅读 2018-10-15 21:21:30
    相同点:二者都可以设置背景颜色 不同点:1、background可以设置... 2、background设置背景颜色会默认有{background:no-repeat},而background-color的默认属性是{background:no-repeat},即{background-color:#c...
  • IDEA安装Background Image Plus插件

    万次阅读 2018-05-14 23:56:55
    IDEA安装Background Image Plus插件:打开IDEA:file-&gt;settings-&gt;plugins 搜索Background Image Plus,点击安装安装完后,提示我们重启,重启后点击view-》set Background image打开后选择图片路径,...
  • Image Classification Background

    万次阅读 2019-12-14 13:43:07
    Background I believe image classification is a great start point before diving into other computer vision fields, espacially for begginers who know nothing about deep learning. When I started to learn...
  • 简化View的background创建,支持在xml和代码中设置backgroundDrawable
  • 关于backgroundbackground-color的区别

    千次阅读 2018-06-20 00:00:12
    例:css{background:#fff;background-color:#fff;}background-color 只设定了背景颜色而background附带了no repeat属性并且background还能设置图片,背景,定位等。
  • 关于background中的几个属性: background-orgin background-clip background-size background-position backround-attachment 三个盒子:border-box|padding-box|content-box 1.background-origin 用来决定背景...
  • background简写属性

    千次阅读 2017-12-10 00:29:42
    现在流行组合,什么歌唱团体,TFboys、至上励合等等。background属性也赶时髦,...我们知道background有很多的单个属性,有background-position、background-repeat等,我们可以把这些background的这些属性简写到组合中
  • backgroundbackground-image的区别

    千次阅读 2018-04-24 15:13:57
    我们在使用背景图时,通常会用到background. 今天遇到一个这样的问题,在vue项目中,给一个按钮加了一张背景图片,用的是background,大小用的contain。现在有一个需求,当点击按钮时,按钮的背景图片需要切换。问题...
  • html background属性

    千次阅读 2019-04-11 13:59:38
    background属性 属性解释 background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: background-color 设置...
  • backgroundbackground-Color的区别

    千次阅读 2016-08-17 11:19:19
    background 可以设置 背景颜色、背景图片、定位等 ; 而background-color 只能设置 背景颜色 。 设置background-color: #aaa;时仅仅改变了背景色,但此时有一个默认的的background:repeat; 而设置background...
  • background: none 等价于: background-color: initial; background-image: none; background-repeat: initial; background-attachment: initial; background-position: initial; background: transparent 等价...
  • CSS 背景位置 background-position属性

    万次阅读 多人点赞 2018-02-17 20:52:35
    背景位置除了背景背景平铺外,CSS还提供了另一个强大的功能,即背景...通过 background-position属性,可以很轻松的控制背景图像在对象的背景区域中的起始显示位置。其语法格式为:background-position: xpos ypo...
  • <div>图片</div> <... background: url(images/images/bg.jpg) no-repeat; background-size: cover; background-attachment: fixed; } </style> 说明: 1、backgro...
  • background 属性介绍

    千次阅读 2019-05-07 16:10:15
    background属性介绍 background 属性是 css 中应用比较多,且比较重要的一个属性,它就是 overflow:hidden 负责给盒子设置背景图片和背景颜色的,background 是一个复合属性,它可以分解成如下几个设置项: 1、 ...
  • 1、background-repeat:设置图片平铺方式。有三个属性:no-repeat(图片保留自身大小不平铺)、repeat-x(图片在水平方向上平铺)、repeat-y(图片在垂直方向上平铺) 2、background-position:确定图片显示的位置...
  • 不知道大家有没有遇到过background-color和background-image一起使用的情况,那有没有小伙伴遇到给了背景颜色,但是使用背景图片的时候,背景颜色会变透明,模拟代码如下(html里只有一个div): div{ height: 500px;...
  • Background Fetch

    千次阅读 2013-10-29 10:59:25
    Background Fetch 是iOS7带来的非常Cool的新特性,开启Background Fetch的App会被系统在合适的时机执行后台任务的代码。比如这个场景:你每天晚上10点会通过自己的RSS阅读器App来阅读,系统可能会在10点之前执行App...
  • 详解background-position

    千次阅读 2018-05-02 21:26:57
    你真的了解background-positionbackground属性是CSS中最常见的属性之一,它是一个简写属性,其包含background-color、background-image、background-repeat、background-attachment、background-position、...
  • background-size 失效

    千次阅读 2018-05-17 19:41:10
    对前端不太懂,在使用background-size 时发现无效,用什么值都没作用,最后把background-size放到了background:url(xxx) 的后面就生效了,就是 这样写的话 background-size 没效果 { background-size:contain; ...
  • background-size和background-position用法

    千次阅读 2016-03-08 13:57:01
    #background-size{ background-size:300px 100px; } 背景图尺寸(百分比表示方式): #background-size2{ background-size:40% 80%; } 背景图尺寸(等比扩展图片来填满元素,即cover值): #background-size3{ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,330,422
精华内容 532,168
关键字:

background