时间戳

首页 > 解决方案 > 背景图像和背景颜色

html - 背景图像和背景颜色

问题描述

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>

<body style="background-color:lightblue;">

</body>
</html>

外部css文件：

body
  {


background-image:url("pass.jpeg"),url("skin.jfif");

  


    background-repeat: no-repeat,no-repeat;

    /* any background image will start from the top left corner of the element targeted*/

  background-size: 100% 50%, 100% 100%;

  /* setting the width and height of both the images */
  }

内联 css 会覆盖外部 css 还是外部 css 会覆盖？但我知道内联 css 的特异性更高。

特殊性甚至出现在这里，因为两个属性都不同，元素相同，即主体。

输出

为什么输出是这样的？到底是怎么回事？整个过程如何运作？是 html 解析器首先将背景色浅蓝色注入整个主体然后嵌入两个背景图像。为什么图像在那里像一条细线

标签： htmlcss

解决方案

内联样式 ( style="") 会覆盖内部样式表 ( )，而内部样式表 ( <style>) 会覆盖外部样式表 ( <link>)。这就是 CSS 的层叠效果，代表Cascading StyleSheets。您可以!important在样式规则之后使用以赋予它更多优先级：

body {
   background-image:url("pass.jpeg"),url("skin.jfif")!important;
   background-repeat: no-repeat,no-repeat;

    /* any background image will start from the top left corner of the element targeted*/

  background-size: 100% 50%, 100% 100%;

  /* setting the width and height of both the images */
}

推荐阅读