精华内容
下载资源
问答
  • background-image属性

    2019-03-27 09:18:00
    background-image 属性 实例,设置body元素的背景图像: body { background-image: url('paper.gif'); background-color: #cccccc; } background-image url('URL') 指向图像的路径。 none 默认值。不显示背景...

    background-image 属性

    • 实例,设置body元素的背景图像:
    body
    {
        background-image: url('paper.gif');
        background-color: #cccccc;
    }
    • background-image
      • url('URL') 指向图像的路径。
      • none 默认值。不显示背景图像。
      • inherit 规定应该从父元素继承 background-image 属性的设置。
    • background-attachment
      • scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
      • fixed 当页面的其余部分滚动时,背景图像不会移动。
      • inherit 规定应该从父元素继承 background-attachment 属性的设置。
    • background-color
      • color_name 规定颜色值为颜色名称的背景颜色(比如 red)。
      • hex_number 规定颜色值为十六进制值的背景颜色(比如 #ff0000)。
      • rgb_number 规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。
      • transparent 默认。背景颜色为透明。
      • inherit 规定应该从父元素继承 background-color 属性的设置。
    • background-repeat
      • repeat 默认。背景图像将在垂直方向和水平方向重复。
      • repeat-x 背景图像将在水平方向重复。
      • repeat-y 背景图像将在垂直方向重复。
      • no-repeat 背景图像将仅显示一次。
      • inherit 规定应该从父元素继承 background-repeat 属性的设置。
    • background-size: length|percentage|cover|contain;
      • length 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
      • percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
      • cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
      • contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

    转载于:https://www.cnblogs.com/wumz/p/10605265.html

    展开全文
  • div的background-image这个属性,只是设置它的url,下面为大家介绍下如何获取它的background-image属性,感兴趣的朋友可以参考下
  • background-image 属性允许指定一个图片展示在背景中。可以和 background-color 连用,因此如果图片不重复地话,图片覆盖不到地地方都会被背景色填充。代码很简单,只需要记住,路径是相对于样式表的,因此以下的...
  • CSS background-image属性

    万次阅读 2017-12-08 21:47:44
    但凡牛掰人物出场,都伴随着“Duang”的特技,它们会不停的加特技,加...background-image属性值模式background-image的属性值模式就是用来给它加“特技”的。它的值模式有: url()模式 linear-gradient()模式 repeat

    但凡牛掰人物出场,都伴随着“Duang”的特技,它们会不停的加特技,加特技,加特技。CSS背景图片的background-image就是这样一位牛人,它一登场肯定也会加“特技”。下面我们来看看它的“特技”


    background-image属性值模式

    background-image的属性值模式就是用来给它加“特技”的。它的值模式有:

    • url()模式

    • linear-gradient()模式

    • repeating-linear-gradient()模式

    • radial-gradient()模式

    • repeating-radial-gradient()模式

    • none特殊值

    除了url()模式,其他模式在其他的文章中都有过详细的介绍,如果不知道,出门左转。下面我来讲讲url()模式。和image标签中的src写法类似,url()中可以写绝对路径,也可以写相对路径,甚至也可以写其他域名下的图片资源。另外url()中的路径加不加引号也无所谓。

    比如:
    url不见了

    上图中我采用“微信公众平台开发”项目中的editor.html这个页面。在这个页面我想引用img文件夹下的3.jpg

    绝对路径写法:
    background-image:url("/img/3.jpg");
    或者:
    background-image:url(/img/3.jpg)\;

    相对路径写法:
    background-image:url(“../img/3.jpg”);
    或者:
    background-image:url(../img/3.jpg);

    其他域名中的图片引用写法:

    background-image:
        url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506963746269&di=5048e5fe21c2ab001d09cce37ec23009&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F1f178a82b9014a909461e9baa1773912b31bee5e.jpg);

    不管使用的是url还是gradient渐变,background-image生成的都是<image>类型的图片。


    在CSS3中,background-image的属性值可以是多值模式,多个值用”,”英文逗号分隔。是不是很爽,这样我们就可以不停的加特技。
    比如:

     background-image:
         url(/img/3.jpg),
         url(/img/4.jpg);
    
     background-image:
         url(/img/3.jpg),
         linear-gradient(45deg,red,green);

    这里需要注意一下:多值模式的时候最先声明的图片会显示在最上边(按属性值从左到右的声明顺序),如果背景图片有重叠,就会遮盖住

         background-size:
             200px 200px,
             400px 200px;
    
         background-position:
             0px 0px,
             50px 50px;
    
         background-repeat:
             no-repeat,
             no-repeat;
    
         background-image:
             url("../img/3.jpg"),
             url("../img/4.jpg");

    图片被遮盖住了


    另外background-image属性的值还有:none;表示没有背景图片。

    如果url()模式声明的路径不对,或者某种原因图片不能显示,则浏览器会把这一不显示的图片自动设置成none;


    配合background-image使用的backgrounds

    剧情设定的武林高手出场,都有护法,就像阳教主,身边就有四大护法–青翼蝠王,紫衫龙王,金毛狮王和白眉鹰王。

    background-image就是背景界的教主,它可比阳教主威风多了,他身边的护法可不止四个,有background-positionbackground-attachmentbackground-originbackground-sizebackground-repeat。它们都是为background-image教主保驾护航的法王,也都是厉害的角色。它们也可以伴随着background-image设置多值模式,以适应教主的多值模式。

    background-image一样这些法王的多值模式也是用英文逗号分隔。

    法王们的多值模式和background-image教主的多值模式是一一对应的。这是理想的状态:

    • 如果法王们的多值模式的值个数多于教主的多值模式的值个数,则多余的部分background-image教主并不会启用。
    • 如果法王们的多值模式的值个数少于教主的多值模式的值个数。则教主就会按照法王们原来的值顺序来循环这个多值以达到教主需要的多值个数为止。

    这样看来这位阳教主还是挺强势的

    我们以background-size为例:

    background-image:
        url(/img/1.jpg),
        url(/img/2.jpg),
        url(/img/3.jpg),
        url(/img/4.jpg);
    
    background-size:
        20px 20px,
        40px 40px,
        60px 60px,
        80px 80px;

    上面的CSS语法就是把
    1.jpg的background-size设置的成20px*20px,
    2.jpg设置成40px*40px,
    3.jpg设置成60px*60px,
    4.jpg设置成80px*80px。
    图片不见了

      background-image:
        url(/img/1.jpg),
        url(/img/2.jpg),
        url(/img/3.jpg),
        url(/img/4.jpg);
    
      background-size:
        20px 20px,
        40px 40px;

    就相当于:

      background-image:
         url(/img/1.jpg),
         url(/img/2.jpg),
         url(/img/3.jpg),
         url(/img/4.jpg);
    
      background-size:
          20px 20px,
          40px 40px,
          20px 20px,
          40px 40px;

    图片被劫持了

    background-image:
       url(/img/1.jpg),
       url(/img/2.jpg);
    
    background-size:
        20px 20px,
        40px 40px,
        60px 60px,
        80px 80px;

    就相当于

    background-image:
        url(/img/1.jpg),
        url(/img/2.jpg);
    
    background-size:
        20px 20px,
        40px 40px;

    此处应该有图片

    微信公众号
    图片玩起了失踪

    原文链接

    展开全文
  • CSS background-image 属性为元素设置背景图像
  • vue项目中background-image属性设置方法 方式一:直接访问 在vue-cli项目中的放在public目录下的资源会被直接复制,不会经过webpack的打包处理。 <span class="item-icon"></span> <style> .item...

    vue项目中background-image属性设置方法

    方式一:直接访问

    在vue-cli项目中的放在public目录下的资源会被直接复制,不会经过webpack的打包处理。

    <span class="item-icon"></span>
    
    <style>
    .item-icon {
      width: 20px;
      height: 20px;
      background-size: 20px 20px;
      vertical-align: middle;
    
      /* 放置路径: public/image/file-icon.png */
      background-image: url('/image/file-icon.png');
    }
    </style>   
    

    方式二:通过变量设置

    <span class="item-icon" 
        :style="{'background-image': `url(${require('@/assets/image/file-icon.png')})`}"
    ></span>
    
    展开全文
  • background-image属性值 url()中可以写绝对路径,也可以写相对路径,甚至也可以写其他域名下的图片资源。url()中的路径加不加引号都可以。 绝对路径写法: background-image:url("/imgs/1.jpg"); //或 ...

    background-image属性值

    url()中可以写绝对路径,也可以写相对路径,甚至也可以写其他域名下的图片资源。url()中的路径加不加引号都可以。

    绝对路径写法: 

    background-image:url("/imgs/1.jpg"); 
    //或
    background-image:url(/imgs/1.jpg);

    相对路径写法: 

    background-image:url(“../imgs/1.jpg”); 
    //或
    background-image:url(../imgs/1.jpg); 

     

    img定义和用法

    img 元素向网页中嵌入一幅图像。

    请注意,从技术上讲,<img> 标签并不会在网页中插入图像,而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

    <img> 标签有两个必需的属性:src 属性 和 alt 属性

    区别

    • 浏览器上下文的区别

      使用div+background-image实现图片显示的时候,该块级元素的上下文为普通的块级上下文

    divä¸ä¸æ

    而使用img显示图片的时候,上下文为img上下文,可以对图片进行另存为等操作。

    imgä¸ä¸æ

    • 块大小对图片显示的区别

      下面例子中,img和div的大小为600px*350px, 图片大小为128px*128px 
    div+background-image的默认样式如下图所示 

    divé»è®¤æ ·å¼
    默认样式有几个注意点

    1. 当原始图片比设置的宽高小,会在块中重复显示以铺满块。
    2. 当原始图片比设置的宽高大,图片会在块中截断。

    div+background-image可以通过backgroung-size, background-rpest, background-position, background-origin, background-clip 等CSS样式来调整显示的样式,当然也可以调整为和img的默认样式一样

    div{
        background-size: 600px 350px;
    }

    div+background-image通过几种样式的组合可以调整出各种各样的显示效果,

    使用img标签显示图片的话,图片实际显示的宽高就是设定的宽高,没有别的办法来设定显示的样式,可以看出一旦设定的宽高比和原来图片的宽高比不一致,显示出的图片就会有拉伸的现象。

    imgé»è®¤æ ·å¼

    但当你只设置宽或只设置高,高或者宽就会按照原来的宽高比自动设置。

    选择

    • 选择div+background-image的情况

      根据div+background-image的特性可以得出选择使用这种方法实现显示图片的情况

    1. 图片用来当作块的背景的情况,这也是这种方法最原始的用法
    2. 由于这种方法的上下文是普通的块级上下文,没有图片另存为等操作,所以可以用于不希望用户能轻易保存图片的情况
    3. 可以用于宽高给定的同时不希望图片拉伸且允许图片截断的情况 
    • 选择img标签的情况

      img是一个语义化标签,在刚接触html+css的时候肯定有接触到语义化的概念以及渐进增强的概念,虽然现在的前端都不太注重渐进增强,但选用img标签能很好的适应语义化和渐进增强。选用它的情况如下

    1. 有明确的语义化要求的情况下选用img标签
    2. 图片是页面的组成部分而不是修饰部分的时候选用img标签
    3. 显示图片只给定宽或高且不能截断图片并要保证图片宽高比的情况下选用img标签

    ————————————————
    版权声明:本文为CSDN博主「若即」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/qq_17004327/article/details/78264763

    展开全文
  • background-image属性来设置背景图片 1.<!doctype html> 2. 3. 4. 5.背景样式 6. 7. 8. 10. 11. 运行以后,背景图在水平垂直方向上都是重复平铺的 二.background-repeat background-repeat属性是用来设置...
  • CSS 背景图像 background-image属性

    万次阅读 2018-02-17 20:50:09
    CSS中,使用 background-image属性来定义背景图像的路径,取值为 none | url,默认值为 none。url 可以是相对路径,也可以是绝对路径。使用相对路径时,url 是相对于 css 所在的文件,而不是要设置样式的HTML文件。...
  • background语法: image-set() = image-set( <image-set-option># ) <image-set-option> = [ <...image-set() 可以根据用户设备的分辨率匹配合适... background-image: image-set( "test.png" 1x, "test
  • 最近在使用background-image属性来实现CSS3的逐帧动画时,碰到了个问题。在chrome浏览器上,background-image属性是支持css3动画的,但是到了firefox上,就完全看不到任何动画。 原因 通过网上查找,才发现W3C标准...
  • 主要介绍了css3实现一个div设置多张背景图片及background-image属性,同时对于css3背景渐变也做了详细的解释,水平渐变,左上角渐变等等方式,需要的朋友可以参考下
  • CSS3/CSS1 background-image 属性 语法: background-image:<bg-image> [ , <bg-image> ]* <bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repe...
  • 定义和用法background-image 属性为元素设置背景图像。元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。1.CSS控制背景图片:对于...
  • 移动焦点时切换background-image属性就可以了。做出来demo后才发现 当第一次切换属性 时 会出现闪烁现象,非第一次就不会出现闪烁现象。 从显示看应该非第一次用到了图片缓存问题,所以就不会出现闪烁现象了。demo...
  • 一般来说,设置input按钮的background-image属性,在Firefox,Chrome等标准W3C浏览器中,只要写二行css: 1 2 background-image: url(images/hello.jpg); background-repeat: no-repeat; ...
  • CSS3/CSS1 background-image 属性语法:background-image: [ , ]* = none | | | | | 默认值:none取值:none:无背景图。< url >:使用绝对或相对地址指定背景图像。< linear-gradient>:使用线性渐变...
  • 路径错误: 注意 网上的 url,绝对路径,相对路径的区别 注意"./" ,"…/"(俩点,不知道为啥我打俩点出来了仨),"/"的...我想在css文件夹里1.css文件中用background-image属性引入img文件夹里的图片。 注意:就算1....
  • background-image是背景图片,是css的一个样式 <img />是一个块状元素,它是一个图片,是html的一个标签 background-image是只能看的 <img />是一个document对象,它是可以操作的。比如更换img src...
  • 设置背景图片只需设置background-image属性,接受url()函数式表示法,可以使用相对路径,如url(img/cat.jpg)。浏览器此时会在保存当前样式表的目录的img子目标中寻找图片。 如果路径以一个斜杠开头,如/img/cat.jpg...
  • 原文地址:html中background-image属性的设置作者:常红智对于图片,首先我们先想到是背景图片。因为我们许许多的装饰都是用背景图片来实现的。既然这样,那么就从CSS控制背景图片讲起吧。 1.CSS控制背景图片:   ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,854
精华内容 1,141
关键字:

background-image属性