如何在css中导入图片base64答案

【问题标题】：how to import image base64 in css如何在css中导入图片base64
【发布时间】：2021-04-27 18:14:24
【问题描述】：

是否有可能以某种方式从另一个文件导入图像 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...

【问题讨论】：

不要发布图片。发布您的实际代码。
抱歉，刚刚编辑，谢谢。
太棒了。我赞成你的回答。感谢您的遵守。

标签： css image base64 base64url

【解决方案1】：

您可以做的是从另一个您可以导入的 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 更易于阅读。从您的编辑看来，您几乎拥有它。

【讨论】：

非常感谢，正是我要找的，祝您有美好的一天！

【解决方案2】：

背景图片的 URL 是一个字符串值。当然，你也可以把它存到另一个文件中，导入，然后用js动态注入。

【讨论】：

感谢您的贡献，祝您有美好的一天！

【解决方案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 内联……

【讨论】：

感谢您的贡献安德，祝您有美好的一天！