Question

<!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解析器先给全身注入背景色淡蓝色然后再嵌入两张背图。为什么图像像一条细线一样向上

Answer 1

好吧，样式有一个层次级别，请始终牢记标签中最接近的样式将始终是第一个生效，然后其他样式将始终在其后面.

正如我所看到的，您的代码中使您的图像拉伸的问题是这一行：background-size: 100% 50%, 100% 100%; - 这里的问题是您使用百分比作为度量，您应该使用其他度量数字作为 px、em、rem、vw，例如 width: 50px height: 50px;

您是在尝试设置图像的宽度和高度，对吗？我认为您不能单独设置它，而只能设置背景的宽度和高度。如果您可以在油漆上剪切或重新调整 img 的大小，请再次使用它。如果您仍然想重新调整背景大小，我建议您在标签内部创建一个，并尝试将图像作为此 div 的背景，然后使用 background-size: 150px 100px;例如，此 div 上的背景大小。

Answer 2

内联样式 (style="") 会覆盖内部样式表 (<style>)，而内部样式表 (<link>) 会覆盖外部样式表 (!important)。这是 CSS 的级联效果，代表级联样式表。您可以在样式规则后使用 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 */ } 以赋予其更高的优先级：

{{1}}

背景图像和背景颜色

2 个答案: