如何在 css 中导入图像 base64

Question

是否有可能以某种方式从另一个文件导入图像 base64？或者将 url 保存到变量并将其导入到 CSS？因为代码很长，这样看起来不太干净。

谢谢大家的帮助。

index.css

    .column {
      margin: calc(var(--grid) / 2);
      border: var(--borderWidth) solid #fffddd;
      border-radius: var(--borderRadius);
    
      
        background-image: linear-gradient(rgba(0, 0, 0, 0.769),rgba(0, 0, 0, 0.961)),url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QDWRXhpZgAATU0AKgAAAAgABAEPAAIAAAASAAAAPgEQAAIAAAAMAAAAUIKaAAUAAAABAAAAXIdpAAQAAAABAAAAZAAAAABOSUtPTiBDT1JQT1JBVElPTgBOSUtPTiBENTEwMAAAAAAKAAAMgAAFgpoABQAAAAEAAACigp0ABQAAAAEAAACqiCcAAwAAAAICgAAAkAMAAgAAABQAAACykgoABQAAAAEAA...

Answer 1

Background-image 的 URL 是一个字符串值。当然也可以存到另外一个文件中，导入后用js动态注入。

Answer 2

您可以做的是从另一个可以导入的 CSS 文件中使用 var() CSS。

文件myCssVar.css

:root {
--mybguri64: url(data-image/jpeg;base64, ... ) ; 
}

您的 CSS 文件

@import url(myCssVar.css);

.column  {
background-image: linear-gradient( ....), var(--mybguri64) ... ; 
}

这将使您的 CSS 更易于阅读。从你的编辑看来你几乎已经完成了。

Answer 3

最好的解决方案是使用带有内联 css 的服务器端脚本来实现这一点。让这一切发生。假设后端语言是 php。并且您的页面由 3 个模板组件组成。它可以使用不同的后端语言 ASP.net、Javs、php、node... 但我在这里使用 php 因为我对它很熟悉。只需按照它非常简单直接。

base64ImageFile.php - 带有 base64image 变量的文件可能超过 1
header_template.php
footer_template.php
application.php

然后在你的 base64Images.php 你有这个..

<?php 
   
    $base64Img ='data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7';

    $base64Image2 = 'data:image/png;base64,sgw....';
    $base64Image3 = 'data:image/png;base64,sgw....';
    $base64Image4 = 'data:image/png;base64,sgw....';
?>

**在我的header_template.php中，将模板添加到文件的开头..**

<?php 
    require('base64images.php');   //the images are rendered here.. 
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
     li {
         background:url(<?php echo $base64Img; ?>) <!-- and used here --->
          no-repeat
          left center;
          padding: 5px 0 5px 25px;
       }
    </style>
</head>

在我的 footer_template.php

<!---  footer elements/scripts go here  --->
 <script src="...."></script>
 <script src="..."></script>

</html>

application.php - 文件，在此处合并模板组件以构建页面

<?php require('header_template.php'); ?>

<body>
    .......body content coes here... 
</body>

<?php require('footer_template.php'); ?>

这样你就可以重复使用和分离组件，甚至可以将图像分离到不同的文件中并调用它们。在您的文件中，而不是将其键入。甚至多张图片...但是 CSS 必须与 HTML..

内联

如何在 css 中导入图像 base64

how to import image base64 in css

css

image

base64

base64url