css 读取图片 |css伪类清除距离

.background {
background-image: url("picture.jpg");
}

在CSS中使用背景图像，只需要在element的CSS规则中使用background-image属性即可。其中url()函数的参数就是图片的URL。在这个例子中，CSS文件和图片文件处于同一目录下。

.image {
content: url("picture.jpg");
}

这种方法同样是使用url()函数来引用图片，但是它是应用在content属性上，在CSS中content属性通常是用于在元素前、后添加内容。然而，当content属性用于引用图片时，它就会把图片嵌入元素的文本中。

除了用url()函数来加载图片，CSS中也可以使用data URIs。data URIs是指一种格式，可以将小图片转换成一个base64编码的文本字符串。这样，图片就变成了浏览器可以直接读取的文本，从而不需要再发送额外的网络请求。

.background {
background-image: url("data:image/png;base64,iVBORw0KGg....");
}

在这个例子中，使用了一个PNG格式的data URI，这个字符串经过base64编码后，就变成了一长串字符。

总之，CSS中有多种方法可以读取图片，选择哪种方法，可以根据具体情况来决定。如果需要大量的图片资源，最好采用合理的方式进行优化，以提高网页的性能。