如何用CSS添加背景图片 – 教程

一、如何在css里面添加背景图片

在CSS中添加背景图片有两种方式，一是通过CSS样式表，二是通过内联样式。下面分别介绍这两种方式：

1.1 通过CSS样式表添加背景图片

在CSS样式表中，我们可以使用background-image属性来指定一个背景图片，这个属性可以包含一个图片的URL地址，以及其他的一些背景属性。下面是一个例子：

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center top;
}

这里我们指定了background-image为background.jpg，background-repeat为no-repeat，表示背景图片不重复，background-position为center top，表示背景图片在容器中垂直居中且水平居中。

1.2 通过内联样式添加背景图片

除了可以在CSS样式表中添加背景图片外，我们也可以在HTML标签中添加内联样式来设置背景图片。通过在标签上使用style属性，来指定相应的背景属性，例如：

<div style="background-image:url('background.jpg'); width: 500px; height: 300px;">
  <p>这是一个背景图片</p>
</div>

这里我们在<div>标签上增加了style属性，并且指定background-image为background.jpg，表示该<div>标签的背景使用background.jpg图片。同时我们也指定了该标签的宽度和高度分别为500px和300px。

二、CSS伪元素添加背景图片

伪元素（pseudo-element）是CSS中的一种虚拟元素，在标记文档中并不存在，但可以通过CSS来为其添加样式。伪元素允许我们将CSS内容添加到DOM树中尚未生成的元素中。

2.1 伪元素添加单张背景图片

伪元素也可以用来添加背景图片，只需在伪元素上添加 background-image 属性，例如：

.btn::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background-image: url("icon.png");
}

上述代码在class为.btn的元素之前添加一个伪元素，并设置该伪元素的background-image属性为icon.png。这里，我们通过设置内容为空、宽度和高度为16px、display:inline-block来显示一个小图标。

2.2 伪元素添加多张背景图片

多张背景图片的添加同样适用于伪元素，只需在background-image中添加多个URL地址，以逗号分隔即可。例如：

.box:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 40px;
  margin-right: 10px;
  background-image:
    url("icon1.png"),
    url("icon2.png");
  background-size:
    10px 10px,
    20px 20px;
  background-repeat: no-repeat, repeat-x;
}

上述代码为class为.box的元素添加一个伪元素，并设置该伪元素的background-image属性为icon1.png和icon2.png，在background-size属性中为每张图片设置不同的尺寸，background-repeat属性中分别为每张图片设置不同的重复样式。

三、html添加背景图片css

3.1 HTML标签直接添加背景图片

除了可以在CSS样式表中添加背景图片，我们也可以在HTML标签上添加样式属性来直接设置背景图片。例如：

<div style="background-image: url('background.jpg');">
  <p>这是一个背景图片</p>
</div>

这里我们在<div>标签上增加了style属性，并且指定background-image为background.jpg，表示该<div>标签的背景使用background.jpg图片。

3.2 CSS引入HTML图片作为背景

我们也可以将HTML中的image元素引入CSS样式表中，作为元素的背景图片。例如：

<img src="background.jpg" class="bg-img">

.bg-img {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.5;
}

这里我们先在HTML中引入一个<img>标签，并设置其src为background.jpg。接着在CSS中，我们为该图片元素添加样式，并将其设置为元素的背景。在CSS样式中我们还可以设置图片元素的宽度、高度、位置、层级、透明度等属性。

四、CSS里怎么添加背景图片

CSS里添加背景图片并不难，只需要使用background-image属性即可。下面是一个简单的例子：

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center top;
}

这样我们就将背景图片添加到了页面的body元素上。

五、css添加背景图片显示不出来

如果在CSS中添加了背景图片，但是在浏览器中却没有显示出来，可能有以下几个原因：

5.1 图片路径错误

首先需要检查图片路径是否正确。如果路径不正确，浏览器就会在服务器上找不到这个图片，导致无法显示。所以，需要检查图片路径是否正确，包括路径的大小写是否正确。

5.2 图片文件已被移动或删除

如果图片文件已被移动或删除，浏览器就找不到这个图片文件，导致无法显示。所以，也需要检查图片文件是否存在。

5.3 图片格式不受支持

如果浏览器不支持图片格式，那么就无法将图片显示在页面上。在这种情况下，需要将图片转换成支持的格式，例如将BMP格式转换成PNG格式。

六、CSS添加背景图片代码

CSS添加背景图片的代码非常简单，主要使用background-image属性来指定背景图片的路径。下面是一个简单的例子：

div {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center top;
}

这里我们将背景图片添加到了<div>标签上，并设置background-repeat为no-repeat，表示背景图片不重复，background-position为center top，表示背景图片在容器中垂直居中且水平居中。

七、CSS在背景图片中添加文字

CSS在背景图片中添加文字可以通过使用CSS的文字属性来实现。可以使用 text-align 和 vertical-align 属性来设置文本的位置，例如：

.div {
  background-image: url("background.jpg");
  color: #fff;
  text-align: center;
  vertical-align: middle;
  font-size: 24px;
  font-weight: bold;
}

上面的代码为标签<div>添加了背景图片，并在背景图片中叠加了文本。text-align: center 和 vertical-align: middle属性分别用来让文本水平和垂直居中显示。color属性用于设置文本颜色，font-size属性用于设置字体大小，font-weight属性用于设置文本的粗细。

八、CSS添加背景图片使之平铺

如果想要让背景图片铺满整个容器，可以使用 background-size 属性来实现。background-size 属性用来控制背景图片的尺寸和缩放方式。常用的值有 cover、contain 和 auto。下面是一个例子：

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

在上述代码中，我们使用了 background-size: cover 值，将背景图片放大或缩小，以适应容器，并截掉多余的部分。如果想让图片全部显示，则可以使用 background-size: contain 值，这个值会缩小图片，使之全部显示在容器中。

九、CSS背景图片怎么添加

CSS添加背景图片很容易，只需要将图片文件的路径添加到 background-image 属性中即可。同时还可以使用 background-repeat 和 background-position 属性来控制图片的重复和位置。下面是一个例子：

div {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center top;
}

在上述代码中，我们将背景图片添加到了<div>标签上，并设置 background-repeat 属性为 no-repeat，这表示背景图片不重复。同时设置 background-position 属性为 center top，表示背景图片在容器中垂直居中且水平居中。

十、CSS添加背景图片路径怎么找选取

CSS添加背景图片路径可以使用如下格式：

background-image: url("url地址");

在这里，我们需要使用图片文件的实际路径来设置 URL 地址。首先，我们需要确定相对路径和绝对路径的概念。相对路径是相对于当前HTML文件的路径，而不是服务器的根目录，例如：

background-image: url("images/background.jpg");

这里我们设置了图片文件的相对路径，相对路径中的 images 目录是在 HTML 文件所在的目录下。如果图片文件在与 HTML 文件相同的目录下，则可以使用如下的简写方式：

background-image: url("background.jpg");

如果图片文件不在 HTML 文件所在的目录下，也可以使用相对路径来指定。例如，假设图片文件在与 HTML 文件相同的父目录中的images目录下，则可以使用如下的相对路径：

background-image: url("../images/background.jpg");

在上述代码中，我们通过 ../ 表示返回到上一级目录，然后进入 images 目录，最终找到了我们需要引用的图片文件。如果图片文件在服务器的根目录下，则可以使用绝对路径来指定，例如：

background-image: url("http://www.example.com/images/background.jpg");

在上述代码中，我们直接指定了图片文件的完整URL地址，这样浏览器就可以在该地址上找到图片文件了。

原创文章，作者：IPWGW，如若转载，请注明出处：https://www.506064.com/n/331006.html