1

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

谢谢你们的帮助。

索引.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...
4

3 回答 3

3

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

文件 myCssVar.css

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

你的 CSS 文件

@import url(myCssVar.css);

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

它将使您的 CSS 更易于阅读。从您的编辑看来，您几乎拥有它。

于 2021-04-27T18:32:31.810 回答
0

背景图像的 URL 是一个字符串值。当然，你可以把它存储在另一个文件中，导入它并使用js动态注入它。

于 2021-04-27T18:22:34.260 回答
0

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

  • base64ImageFile.php - 带有 base64image 变量的文件，它可能大于 1
  • header_template.php
  • 页脚模板.php
  • 应用程序.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 内联……

于 2021-04-27T18:39:21.830 回答