• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • background-image

    CSS background-image 属性用于为一个元素设置一个或者多个背景图像。

    示例

    background-image: url("/upload/browser/compatible_ie.gif");
    background-image: url("/upload/browser/compatible_ie.gif"),
                      url("/upload/browser/compatible_firefox.gif");
    background-image: url("/upload/browser/compatible_firefox.gif"),
                      url("/upload/browser/compatible_ie.gif");
    background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
                      url("/upload/browser/compatible_ie.gif");
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持background-image

    语法:

    background-imagenone| <image>

    取值:

    • none:无背景图。
    • <image>:使用绝对或相对地址指或者创建渐变色来确定图像。

    说明:

    设置或检索对象的背景图像。

    • 如果设置了<background-image>,同时也建议设置<background-color>用于当背景图像不可见时保持与文本颜色有一定的对比度。
    • 如果定义了多组背景图,且背景图之间有重叠,写在前面的将会盖在写在后面的图像之上。
    • 对应的脚本特性为backgroundImage

    CSSbackground-image属性用于为一个元素设置一个或者多个背景图像。

    • 在绘制时,图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。
    • 然后元素的边框border会在它们之上被绘制,而background-color会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系,需要在CSS属性background-clipbackground-origin中定义。
    • 如果一个指定的图像无法被绘制(比如,被指定的 URI 所表示的文件无法被加载),浏览器会将此情况等同于其值被设为none
    • 即使图像是不透明的,背景色在通常情况下并不会被显示,web开发者仍然应该指定background-color属性。如果图像无法被加载—例如,在网络连接断开的情况下—背景色就会被绘制。
    默认值none
    适用于所有元素
    继承性
    动画性
    计算值指定值

    例子

    //HTML
    <div>
      <p class="catsandstars">
        this paragraph is full of cats<br />and stars.
      </p>
      <p>this paragraph is not.</p>
      <p class="catsandstars">
        here are more cats for you.<br />look at them!
      </p>
      <p>and no more.</p>
    </div>
    
    //CSS
    p {
      font-size: 1.5em;
      color: #fe7f88;
      background-image: none;
      background-color: transparent;
    }
    
    div {
      background-image:
          url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
    }
    
    .catsandstars {
      background-image:
          url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), 
          url("https://mdn.mozillademos.org/files/7693/catfront.png");
      background-color: transparent;
    }
    

    可访问性相关

    浏览器不会向辅助技术提供有关背景图像的任何特殊信息。这对于屏幕阅读器来说非常重要,因为屏幕阅读器不会告知用户它的存在,因而不能向用户传达任何信息。如果图像包含对理解页面总体目的至关重要的信息,则最好在文档中作出语义性地描述(describe it semantically)。

    • MDN Understanding WCAG, Guideline 1.1 explanations
    • Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div{
    	width:450px;
    	height:300px;
    	background-image:url("images/22.jpg");
    }
    </style>
    </head>
    
    <body>
    <div></div>
    </body>
    </html>

    效果图: