精华内容
下载资源
问答
  • background
    千次阅读
    2019-04-11 14:34:38

    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 属性为元素设置背景图像。

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

     

    更多相关内容
  • CSS背景background详解,background-position详解

    千次阅读 多人点赞 2021-02-03 18:04:38
    这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachment 等的属性,也会介绍一些有关背景(background)的常用技巧,以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。...

    背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一。这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachment 等的属性,也会介绍一些有关背景(background)的常用技巧,以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。

    css2 中的背景(background)

    概述

    CSS2 中有5个主要的背景(background)属性,它们是:

    * background-color: 指定填充背景的颜色。

    * background-image: 引用图片作为背景。

    * background-position: 指定元素背景图片的位置。

    * background-repeat: 决定是否重复背景图片。

    * background-attachment: 决定背景图是否随页面滚动。

    这些属性可以全部合并为一个缩写属性: background。需要注意的一个要点是背景占据元素的所有内容区域,包括 padding 和 border,但是不包括元素的 margin。它在 Firefox, Safari ,Opera 以及 IE8 中工作正常,但是 IE6 和 IE7 中,background 没把 border 计算在内。

     

    基本属性

     

    背景色(background-color)

    background-color 属性用纯色来填充背景。有许多方式指定这个颜色,以下方式都得到相同的结果。

    1

    2

    3

    background-colorblue;

    background-colorrgb(00255);

    background-color#0000ff;

    background-color 也可被设置为透明(transparent),这会使得其下的元素可见。

     

    背景图(background-image)

    background-image 属性允许指定一个图片展示在背景中。可以和 background-color 连用,因此如果图片不重复地话,图片覆盖不到地地方都会被背景色填充。代码很简单,只需要记住,路径是相对于样式表的,因此以下的代码中,图片和样式表是在同一个目录中的。

    1

    background-imageurl(image.jpg);

    但是如果图片在一个名为 images 的子目录中,就应该是:

    1

    background-imageurl(images/image.jpg);

    糖伴西红柿:使用 ../ 表示上一级目录,比如 background-image: url(../images/image.jpg); 表示图片位于样式表的上级目录中的 images 子目录中。有点绕,不过这个大家应该都知道了,我就不详说了。

     

    背景平铺(background-repeat)

    设置背景图片时,默认把图片在水平和垂直方向平铺以铺满整个元素。这也许是你需要的,但是有时会希望图片只出现一次,或者只在一个方向平铺。以下为可能的设置值和结果:

    1

    2

    3

    4

    5

    background-repeatrepeat/* 默认值,在水平和垂直方向平铺 */

    background-repeatno-repeat/* 不平铺。图片只展示一次。 */

    background-repeatrepeat-x/* 水平方向平铺(沿 x 轴) */

    background-repeatrepeat-y/* 垂直方向平铺(沿 y 轴) */

    background-repeat: inherit; /* 继承父元素的 background-repeat 属性*/

     

    【重点】背景定位(background-position)

    background-position 属性用来控制背景图片在元素中的位置。技巧是,实际上指定的是图片左上角相对于元素左上角的位置。
    下面的例子中,设置了一个背景图片并且用 background-position 属性来控制它的位置,同时也设置了 background-repeat 为 no-repeat。计量单位是像素。第一个数字表示 x 轴(水平)位置,第二个是 y 轴(垂直) 位置。

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    /* 例 1: 默认值 */

    background-position0 0/* 元素的左上角 */

     

    /* 例 2: 把图片向右移动 */

    background-position75px 0;

     

    /* 例 3: 把图片向左移动 */

    background-position-75px 0;

     

    /* 例 4: 把图片向下移动 */

    background-position0 100px;

     

    background-position 属性可以用其它数值,关键词和百分比来指定,这比较有用,尤其是在元素尺寸不是用像素设置时。

    关键词是不用解释的。x 轴上:

    • * left
    • * center
    • * right

    y 轴上:

    • * top
    • * center
    • * bottom

    顺序方面和使用像素值时的顺序几乎一样,首先是 x 轴,其次是 y 轴,像这样:

    1

    background-positionright top;

    使用百分数时也类似。需要主要的是,使用百分数时,浏览器是以元素的百分比数值来设置图片的位置的。看例子就好理解了。假设设定如下:

    1

    background-position100% 50%;

    This goes 100% of the way across the image (i.e. the very right-hand edge) and 100% of the way across the element (remember, the starting point is always the top-left corner), and the two line up there. It then goes 50% of the way down the image and 50% of the way down the element to line up there. The result is that the image is aligned to the right of the element and exactly half-way down it.

    糖伴西红柿:这一段没想到合适的翻译,保留原文,意译。 

    update: 感谢天涯的指教,这段搞明白了。使用百分数定位时,其实是将背景图片的百分比指定的位置和元素的百分比位置对齐。也就是说,百分数定位是改变了背景图和元素的对齐基点。不再像使用像素和关键词定位时,使用背景图和元素的左上角为对齐基点。例如上例的 background-position: 100% 50%; 就是将背景图片的 100%(right) 50%(center) 这个点,和元素的 100%(right) 50%(center) 这个点对齐。

    这再一次说明了,我们一直认为已经掌握的简单的东西,其实还有我们有限的认知之外的知识。

    注意原点总是左上角,最终的效果是笑脸图片被定位在元素的最右边,离元素顶部是元素的一半,效果和 background-position: right center; 一样。

     

    背景附着

    background-attachment 属性决定用户滚动页面时图片的状态。三个可用属性为 scroll(滚动),fixed(固定) 和 inherit(继承)。inherit 单纯地指定元素继承他的父元素的 background-attachment 属性。

    为了正确地理解 background-attachment,首先需要明白页面(page)和视口(view port)是如何协作地。视口(view port)是浏览器显示网页的部分(就是去掉工具栏的浏览器)。视口(view port)的位置固定,不变动。

    当向下滚动网页时,视口(view port)是不动的,而页面的内容向上滚动。看起来貌似视口(view port)向页面下方滚动了。如果设置 background-attachment: scroll,就设置了当元素滚动时,元素背景也必需随着滚动。简而言之,背景是紧贴元素的。这是 background-attachment 默认值。

    用一个例子来更清楚地描述下:

    1

    2

    3

    4

    5

    background-imageurl(test-image.jpg);

     

    background-position0 0;

    background-repeatno-repeat;

    background-attachmentscroll;

    当向下滚动页面时,背景向上滚动直至消失。

    但是当设置 background-attachment 为 fixed 时,当页面向下滚动时,背景要待在它原来的位置(相对于浏览器来说)。也就是不随元素滚动。

    用另一个例子描述下:

    1

    2

    3

    4

    background-imageurl(test-image.jpg);

    background-position0 100%;

    background-repeatno-repeat;

    background-attachmentfixed;

    页面已经向下滚动了,但是图像仍然保持可见。

    需要重视的一点是背景图只能出现在它父元素能达到的区域。即使图片是相对于视口(view port)定位地,如果它的父元素不可见,图片就会消失。参见下面的例子。此例中,图片位于视口(view port)的左下方,但是只有元素内的图片部分是可见的。

    1

    2

    3

    4

    background-imageurl(test-image.jpg);

    background-position0 100%;

    background-repeatno-repeat;

    background-attachmentfixed;

    因为图片开始在元素之外,一部分图片被切除了。

     

    展开全文
  • } backgound 背景相关的简写属性,所有背景相关的样式都可以通过该样式来设置并且该样式没有顺序要求,也没有哪个属性是必须写的 注意 background-size必须写在background-position的后边,并且使用/隔开background...

    背景

    1. PS 的基本设置

    工欲善其事,必先利其器

    在介绍背景之前,首先需要做好准备工作:安装 PS 与基本设置

    这里就不详细介绍 PS 的安装了,因为网上一抓一大把,主要介绍 PS 的基本设置

    左侧工具栏

    调成 2 列,更方便使用

    image-20210612131932089

    右侧工具栏

    不需要的视图统统关掉

    image-20210612132102709

    修改单位为像素

    由于一般默认的单位是厘米,所以这里需要修改

    在历史记录、颜色或色板附近右键,打开选项卡,选择界面选项

    image-20210612132552271

    打开单位与标尺,修改单位中的标尺文字像素

    image-20210612132904635

    2. 背景

    • background-color 设置背景颜色
    • background-image 设置背景图片
      • 如果背景图片大小小于元素,则背景图片会自动在元素中平铺将元素铺满
      • 如果背景图片大小大于元素,则背景图片一部分会无法完全显示
      • 如果背景图片大小等于元素,则背景图片会直接正常显示
    • background-repeat 设置背景图片的重复方式
      • repeat 默认值,背景图片沿着 x 轴和 y 轴双方向重复
      • repeat-x 背景图片沿着 x 轴方向重复
      • repeat-y 背景图片沿着 y 轴方向重复
      • no-repeat 背景图片不重复
    • background-position 设置背景图片的位置
      • 通过top left right bottom center几个表示方位的词来设置背景图片的位置:使用方位词时必须要同时指定两个值,如果只写一个则第二个默认就是center
      • 通过偏移量来指定背景图片的位置:水平方向偏移量、垂直方向变量
    • background-clip 设置背景的范围
      • border-box 默认值,背景会出现在边框的下边
      • padding-box 背景不会出现在边框,只出现在内容区和内边距
      • content-box 背景只会出现在内容区
    • background-origin 背景图片的偏移量计算的原点
      • border-box 背景图片的变量从边框处开始计算
      • padding-box 默认值,background-position从内边距处开始计算
      • content-box 背景图片的偏移量从内容区处计算
    • background-size 设置背景图片的大小
      • 第一个值表示宽度,第二个值表示高度;如果只写一个,则第二个值默认是auto
      • cover 图片的比例不变,将元素铺满
      • contain 图片比例不变,将图片在元素中完整显示
    • background-attachment 背景图片是否跟随元素移动
      • scroll 默认值,背景图片会跟随元素移动
      • fixed 背景会固定在页面中,不会随元素移动

    可以同时设置背景图片和背景颜色,这样背景颜色将会成为图片的背景色

    示例 1

    .box1 {
      height: 500px;
      width: 500px;
      overflow: auto;
      border: 20px red double;
      padding: 10px;
      /* 背景色 */
      background-color: darksalmon;
      /* 背景图 */
      background-image: url("/assets/背景.png");
      /* 背景图重复方式 */
      background-repeat: no-repeat;
      /* 背景图偏移位置 */
      background-position: 0 0;
      /* 背景图偏移量计算的原点 */
      background-origin: content-box;
      /* 背景范围 */
      background-clip: content-box;
      /* 背景图片大小 */
      background-size: contain;
    }
    
    .box2 {
      width: 100px;
      height: 1000px;
      background-color: orange;
      background-image: url("assets/背景2.jpg");
      background-repeat: no-repeat;
      background-position: 50px 50px;
      /* 背景图片是否跟随移动 */
      background-attachment: fixed;
    }
    

    动画

    backgound 背景相关的简写属性,所有背景相关的样式都可以通过该样式来设置并且该样式没有顺序要求,也没有哪个属性是必须写的

    注意

    • background-size必须写在background-position的后边,并且使用/隔开background-position/background-size
    • background-origin background-clip 两个样式,orgin要在clip的前边

    示例 2

    .box1 {
      height: 500px;
      width: 500px;
      border: 10px red double;
      padding: 10px;
      background: #bfa url("assets/dlam.png") no-repeat 100px 100px/200px
        padding-box content-box;
    }
    

    image-20210612155539118

    练习 1:线性渐变效果的背景图

    image-20210612160713058

    如果我们仔细挂那可能,会发现很多网站导航条的背景色并不是单一的某种颜色,而是有一个渐变的效果

    不过到目前为止,我们还没有学习线性渐变的内容,不过凭上面所学的知识同样可以实现

    切图

    首先,我们需要通过 PS 软件进行切图

    1. 按住Alt同时滚动鼠标滑轮,可以对图片大小进行缩放;调整至合适大小,再选择矩形块工具,截取一个宽度为 1px 大小的图片

    image-20210612164205624

    1. 然后选择图像-裁剪,就可以得到一个我们需要的一个背景图片

    image-20210612164423702

    image-20210612164544430

    1. 最后,选择文件-存储为Web所用格式

    image-20210612164611999

    1. 我这里选择的是 PNG 的格式,你可以对比几种格式,看看最终的图片大小折中选择,最好选择存储位置即可

    image-20210612164704402

    1. 得到我们需要的背景图片之后,就可以引入到css样式中了

    代码

    height: 60px;
    width: 1500px;
    background: url("assets/背景3.png") repeat-x;
    

    效果

    image-20210612163950079

    练习 2:按钮点击效果

    代码

    <style>
      a:link {
        /* 因为本身是行内元素,变成块元素更方便设置宽高 */
        display: block;
        width: 93px;
        height: 29px;
        background: url("assets/背景/练习2-背景/link.png");
      }
    
      a:hover {
        background: url("assets/背景/练习2-背景/hover.png");
      }
    
      a:active {
        background: url("assets/背景/练习2-背景/active.png");
      }
    </style>
    
    <a href="javascript:;"></a>
    

    效果

    动画

    雪碧图与渐变

    3. 雪碧图

    解决图片闪烁的问题:

    可以将多个小图片统一保存到一个大图片中,然后通过调整background-position来显示响应的图片

    这样图片会同时加载到网页中就可以有效的避免出现闪烁的问题

    这个技术在网页中应用十分广泛,被称为CSS-Sprite,这种图我们称为雪碧图

    雪碧图的使用步骤:

    1. 先确定要使用的图标
    2. 测量图标的大小
    3. 根据测量结果创建一个元素
    4. 将雪碧图设置为元素的背景图片
    5. 设置一个偏移量以显示正确的图片

    雪碧图的特点:

    • 一次性将多个图片加载进页面,降低请求的次数,加快访问速度,提升用户的体验

    示例 1

    image-20210612230816217

    a:link {
      display: block;
      width: 93px;
      height: 29px;
      background: url("assets/背景/练习2-背景/btn.png");
      /* 默认值,可以不设置 */
      background-position: 0 0;
    }
    
    a:hover {
      /* 设置水平方向的一个偏移量;注意是向左移动,所以是负值 */
      background-position: -93px 0;
    }
    
    a:active {
      /* 设置水平方向的一个偏移量;注意是向左移动,所以是负值 */
      background-position: calc(-93px * 2) 0;
    }
    

    动画

    我们对比以下之前练习中的效果,第一次加载进来的时候会有明显的闪烁

    动画

    示例 2

    image-20210612230929739

    .box1 {
      width: 109px;
      height: 33px;
      background: url("assets/背景/练习3-雪碧图/amazon-sprite_.png");
      /* 设置水平和垂直方向的一个偏移量;注意移动方向 */
      background-position: -10px -10px;
    }
    
    .box2 {
      width: 42px;
      height: 30px;
      background: url("assets/背景/练习3-雪碧图/amazon-sprite_.png");
      /* 设置水平和垂直方向的一个偏移量;注意移动方向 */
      background-position: -58px -338px;
    }
    

    image-20210612231316806

    4. 线性渐变

    通过渐变可以设置一些复杂的背景颜色,可以实现从一个颜色向其他颜色过渡的效果

    !!渐变是图片,需要通过background-image来设置

    线性渐变,颜色沿着一条直线发生变化 linear-gradient()

    # 红色在开头,黄色在结尾,中间是过渡区域
    background-image: linear-gradient(red, yellow);
    

    image-20210612205407103

    线性渐变的开头,我们可以指定一个渐变的方向

    • to left
    • to right
    • to bottom
    • to top
    • deg deg 表示度数
    • turn 表示圈
    background-image: linear-gradient(to left, red, yellow);
    background-image: linear-gradient(to right, red, yellow);
    background-image: linear-gradient(to top, red, yellow);
    background-image: linear-gradient(to bottom, red, yellow);
    

    上面基本的 4 个方向的渐变很好理解,我们就不再做过多的一一解释了

    我们来看度数的渐变效果

    background-image: linear-gradient(45deg, red, yellow);
    

    image-20210612210437495

    会发现它是从左下角往右上角去进行渐变的,为什么呢?

    我们小时候肯定都用过量角器

    image-20210612210854253

    是不是恍然大悟,我们以原点作为起始点,有角度的那条边去做渐变,再把四象限的概念和矩形内部的四个角对应起来

    总结:线性渐变的边上的某一点为起点,以一定角度渐变的;渐变方向的颜色是线性变化的,而其垂线方向的颜色是一致的

    然后看下圈数的表示方法

    background-image: linear-gradient(0.4turn, red, yellow);
    

    因为圈数和角度之间可以相互转换,所以这里就不再进行赘述了

    另外,渐变可以同时指定多个颜色,多个颜色默认情况下平均分布,也可以手动指定渐变的分布情况

    repeating-linear-gradient() 可以平铺的线性渐变

    background-image: repeating-linear-gradient(red, yellow);
    

    image-20210612205909079

    默认情况下,跟linear-gradient(red, yellow)效果一样,我们稍作改动

    background-image: repeating-linear-gradient(red 0px, yellow 50px);
    

    image-20210612210015129

    由于我们设置的div宽高为200px,所以会有 4 次重复的渐变效果

    所以默认情况下,下列几种写法是一致的,效果相同

    background-image: linear-gradient(red, yellow);
    background-image: repeating-linear-gradient(red, yellow);
    /* 因为我们设置的div盒子的宽高为200px,所以这里[height]=200px */
    background-image: repeating-linear-gradient(red 0, yellow [height]);
    

    5. 径向渐变

    radial-gradient() 径向渐变(放射性的效果)

    background-image: radial-gradient(red, yellow);
    

    默认情况下,径向渐变的形状根据元素的形状来计算的

    • 正方形 --> 圆形

      image-20210612215139463

    • 长方形 --> 椭圆形

      image-20210612215228775

    默认情况下,circleellipse是自动适配盒子的,我们也可以手动指定径向渐变的形状

    形状

    • circle 圆形
    • ellipse椭圆
    background-image: radial-gradient(circle, red, yellow);
    

    image-20210612220320304

    也可以指定渐变的位置

    位置

    • top
    • right
    • left
    • center
    • bottom
    background-image: radial-gradient(at left, red, yellow);
    

    image-20210612220417179

    当然,除了上述值,还可以指定像素

    大小

    • closest-side 近边
    • farthest-side 远边
    • closest-corner 近角
    • farthest-corner 远角
    background-image: radial-gradient(100px 60px, red, yellow);
    

    image-20210612220547137

    同时对其形状/大小和位置进行指定

    radial-gradient(形状/大小 at 位置, 颜色 位置, 颜色 位置, 颜色 位置)

    background-image: radial-gradient(circle at 50px 100px, red 50px, yellow 100px);
    

    image-20210612221359657

    总结一下

    形状

    • circle 圆形
    • ellipse椭圆

    大小

    • closest-side 近边
    • farthest-side 远边
    • closest-corner 近角
    • farthest-corner 远角

    位置

    • top
    • right
    • left
    • center
    • bottom

    类似于线性渐变,径向渐变也有对应的repeat属性

    background-image: repeating-radial-gradient(
      circle at 50px 100px,
      red 50px,
      yellow 100px
    );
    

    image-20210612221604176

    总结:径向渐变的渐变方向以圆心为起点,往四周扩散的;同一半径上的颜色是渐变的,同一圆周上的颜色是一致的

    展开全文
  • background的使用方法

    千次阅读 2022-02-12 15:08:10
    今天给大家分享的是background(背景)的五个属性,分别是background-color(背景颜色)、background-image(背景图片)、background-repeat(背景平铺)、background-position(背景位置)、background-attachment(背景固定);...

    大家好,本人是一名技术小白,每周在学习h5之余,会在学习的内容中抽出些知识点跟大家分享,希望有机会帮到一些朋友,不足之处也希望大家多多指正.

    今天给大家分享的是background(背景)的五个属性,分别是background-color(背景颜色)、background-image(背景图片)、background-repeat(背景平铺)、background-position(背景位置)、background-attachment(背景固定);这五项在日常应用中用的比较多,兼容性也比较好,所以针对这五项分享一下.

    一、Background-color(背景颜色):

    Background-color(背景颜色)的使用和color(字体颜色)类似,可用三种方式:

    1.十六进制-如:””#fffff”,注明(六个相同数字及字母可缩写为三个-如:”fff”).

    2.RGB-如:”rgb(255,255,255)”.

    3.颜色名称-如:”red”.

    二、background-image(背景图片):

    示范:background-image:url(图片地址);

    图片初始位置为父级元素的左上角.

    这个属性较为简单,需要找准图片所在位置,单纯记忆就可.

    三、background-repeat(背景平铺):

    示范:background-repeat: no-repeat.

    此项共有五个属性:repeat(平铺)/no repeat(不平铺)/repeat-x(x轴平铺)/repeat-y(y轴平铺)/inherit(父级继承).

    repeat:背景图片会按照自身尺寸铺满整个父级元素,当自身尺寸比父级元素大时,则会显示一部分.

    no-repeat:顾名思义,背景图片会根据自身尺寸单张出现在父级元素,不会铺满.

    repeat-x:背景图片根据自身尺寸沿x轴铺满.

    repeat-y:背景图片根据自身尺寸沿y轴铺满.

    inherit:指定background-repeat属性设置应该从父元素继承.

    四、background-position(背景位置):

    此项共有四种形式可供选择:

    1.英文单词-如:background-position:left top;(数值不分前后,根据方向划分.)

    2.百分比-如:background-position:x% y%;(第一个值是水平位置,第二个值是垂直.左上角是0%0%.右下角是100%100%.如果仅指定了一个值,其他值将是50%.默认为0% 0%)

    3.数值式-如:background-position:0px 0px;(第一个值是水平位置,第二个值是垂直.左上角是0.单位可以是像素(0px0px)或任何其他 CSS单位.如果仅指定了一个值,其他值将是50%.百分比、数值可混用)

    4.inherit:指定background-repeat属性设置应该从父元素继承.

    五、background-attachment(背景固定):

    此项共有四种形式可供选择:scroll(滚动)/fixed(固定)/iocal(滚动条内固定)/inherit(父级继承).

    1.background-attachment:scroll;(背景图片跟随页面的滚动而滚走,跟随原来的位置.默认值.)

    2.background-attachment:fixed;(页面滚动时,背景图片固定在父级元素的某个位置)

    3.background-attachment:iocal;(背景图片会随着元素内容的滚动而滚走,跟随原来的位置.)

    4.background-attachment:inherit;(指定background-repeat属性设置应该从父元素继承.)

    最后还有五项属性的优化写法分享给大家:

    示范:background:yellow url(图片位置) no-repeat center center fixed;

    这是一个背景图片的书写方法;

    如果一个父级元素内有两个乃至多个背景图片的书写需求的话请看下列示范:

    示范:background: url(图片位置) no-repeat center center fixed,url(图片位置) no-repeat center center fixed yellow;

    两个以上的背景图片中间用逗号隔开,然后继续书写.

    需要注意的是,背景颜色需要放在最后一项的最后一个,否则颜色不会出现.

    以上就是本次的分享,希望大家能够喜欢!也感谢大家的驻足观看!

    展开全文
  • 图解background-attachment、clip、repeat、size

    万次阅读 多人点赞 2021-09-08 19:21:37
    创作不易 拒绝白嫖 点个赞呗 关注专栏 学透CSS,带你走进CSS的深处!!! 前言 上文我们介绍了,背景图片以及渐变,但是仅仅学会那点,只是背景图片的九牛一毛,本文要介绍的backdround-* 大家族,也是...background-.
  • CSS-background、渐变

    千次阅读 2021-10-27 17:38:45
    background-背景 1.background-img ​ 属性值: ​ 1.none(无图像) 2.url():图像路径 2.background-repeat --图像平铺的方式 默认情况下,图像在水平方向和垂直方向重复,即repeat repeat-x:图像在水平方向重复 ...
  • background-image使用

    千次阅读 2022-05-18 19:48:15
    background-image:(" ") background-repeat属性(背景平铺) background-size属性(设置背景图片大小) background-position属性(背景图片位置) 1.background-image: url(" ") ; 首先要知道background-...
  • css中background复合属性详解

    千次阅读 2021-01-31 23:02:14
    ==========================================================单个属性的写法.sample1 {/*背景颜色*/background-image: url(sample.gif); /*背景图片*/background-repeat: no-repeat; /*平铺(?)*/background-...
  • background属性用法总结

    千次阅读 2021-03-20 14:11:39
    background属性总结
  • 设置background-color背景色为全透明

    千次阅读 2022-06-06 17:11:20
    设置background-color背景色为全透明
  • 巧用background属性实现图片居中

    千次阅读 2021-06-13 11:17:02
    想必大家都常被页面居中这个问题困扰吧,这里简单分享一下一个使用background样式属性来实现图片居中的新用法。很久以前本骚年常用image.onload()这样的方式获取图片大小再进行调整,得到图片原比例居中的效果,自从...
  • vscode 全局背景图片设置 background

    千次阅读 2021-07-15 11:03:27
    按照网上的安装 设置步骤 在应用商店中搜索background 找到下载量最多的那个 通常是第一个, 然后点击安装, 在网上搜索还要设置setting.json 我一开始也设置了, 但是一直没有展示出来, 右下角也没有提示让我重新启动...
  • background设置透明度兼容性

    千次阅读 2021-07-02 11:21:43
    最近在做一个弹窗,大概思路是这样的,当弹窗想展示是图片时,放图片的div为透明(前提是上传的这张图是png格式的),当弹窗为公告显示文字时,...ios写法background: transparent;html:class="{'opacity': $store....
  • html基本属性一:background

    千次阅读 2021-09-02 09:22:44
    (一)background 1、background-imge:背景图片 基本用法: (1)本地图片:background-imge:url('图片地址') (2)在线图片 background-imge:url(./../imge:背景图片) 2、背景平铺:background-repeat...
  • background-image: url(images/bg.jpg); /* 背景图垂直、水平均居中 */ background-position: center center; /* 背景图不平铺 */ background-repeat: no-repeat; /* 当内容高度大于图片高度时,背景图像的...
  • background-size使用详解

    千次阅读 2021-06-20 01:45:22
    语法:background-size: auto | | | cover | contain取值说明:1、auto:默认值,不改变背景图片的原始高度和宽度;2、:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片...
  • Background:linear-gradient()详解

    万次阅读 多人点赞 2021-07-21 17:46:25
    一般渐变 未设置角度,则默认为180deg(从上到下) 设置了角度,则0deg为竖直向上,然后顺时针旋转 上图! 块渐变 .aq1{ background-image: linear-gradient(45deg,#87f 60%,#f78 60%);... background
  • BackgroundService 大佬教的好

    千次阅读 2020-11-29 19:23:00
    BackgroundService 源码分析 因为换了工作也有两个多月没有写博客啦,因为跟着红超哥(大佬)一直在学习和做项目(反正就是在潜心修炼,大佬每天也是在我十万个为什么中度过的。) 最近在做一个接收服务端信息的项目...
  • background-size 之 背景图的尺寸设置

    千次阅读 2022-06-16 21:49:04
    引:background-size: 没有设置任何尺寸时使用图片本身的大小,宽度和高度都是auto默认值可以用px设置成具体的值,也可以使用百分比各种不同比例的适配问题,完美适配很少发生背景图1和背景图2 you红色边框分隔开来...
  • background属性介绍

    千次阅读 2020-09-07 11:49:04
    background属性在CSS中有较多的应用,主要用来设置背景颜色、图片。background属性可以分开写,也可以合并,建议合并减少代码量。 1. background-color:设置背景颜色; 设置的背景颜色会填充元素的内容、内边距和...
  • Vue项目中background-image属性设置方法

    万次阅读 2021-04-07 10:44:55
    vue项目中background-image属性设置方法 方式一:直接访问 在vue-cli项目中的放在public目录下的资源会被直接复制,不会经过webpack的打包处理。 <span class="item-icon"></span> <style> .item...
  • backgroundbackground-color的区别 有时候你是不是会有疑问,当你在ul >li>a中把a设置成了display:block 开始时用background设置了背景图片,但你在接下来的时候给他是指 a:link,a:visited时想要给他添加...
  • 不知道大家有没有遇到过background-color和background-image一起使用的情况,那有没有小伙伴遇到给了背景颜色,但是使用背景图片的时候,背景颜色会变透明,模拟代码如下(html里只有一个div): div{ height: 500px;...
  • css background不显示是什么原因?

    千次阅读 2021-06-12 15:30:57
    在CSS中,可以使用background属性来设置背景,可以设置背景色,也可以设置背景图片。但有时background不显示,这是什么原因?下面本篇文章就来给大家介绍一下,希望对大家有所帮助。css background不显示是什么原因...
  • background-color和background-image问题

    千次阅读 2019-09-17 08:37:52
    今天撸码的时候发现需要background-color和background-image 一起用,才开始考虑两个可不可以一起用 查阅多方资料才知道可以写成background:color url()...
  • ImageView中XML属性src和background的区别:background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸。src是图片内容(前景),bg是背景,可以同时使用。此外:scaleType只对src起...
  • background-image: url("https://mpt.135editor.com/mmbiz_gif/uN1LIav7oJ84T6TnzapJHpqQx8IaOOL0nfYWuyCbx2G0xHn6fdnU2oSicxJ0ibuja6gdvdemx9AHdbB6VUo9zkWA/0?wx_fmt=gif"); background-size: 100%; ...
  • background-image无法显示图片

    千次阅读 2021-04-21 17:31:09
    在使用js来设置backgroundImage参数时,我发现有些图片无法正常显示,仔细看了区别发现,文件名中带有括号的无法显示 解决方法: 在url的括号内上添加引号,将其固定为字符串,来防止圆括号的冲突问题 ...
  • uni-app css之background属性说明

    千次阅读 2021-11-03 13:56:11
    background-color background-position background-size background-repeat background-image background-origin background-clip background-attachment 1.background-color : 设置元素的背景颜色 有三种...
  • 背景缩放background-size

    千次阅读 2021-09-05 10:51:01
    背景缩放background-size 作用:规定背景图像的尺寸 格式——background-size: 图片宽度 图片高度; 可以随意设置图片宽高(可能会导致图片变形) background-size: 100px 100px; 可以只设置图片宽度...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,533,644
精华内容 613,457
关键字:

background