首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS图像不显示(GoogleAppScript)

CSS图像不显示(GoogleAppScript)
EN

Stack Overflow用户
提问于 2018-10-26 05:36:10
回答 2查看 0关注 0票数 0

我实现了一个加载栏,当我的脚本在GoogleSheet中运行时,几乎所有CSS中使用的元素实际上都正常工作,唯一不起作用的是应该位于加载栏中心的图像。

I found out how to actually implement the CSS in Google Appscript here CSS with Google App Script. But whenever I use 背景-图像:URL(myImage.png); there is no image shown in the loading bar.

CSS

代码语言:txt
复制
<!DOCTYPE html>
<html lang="es">
<head>
    <link rel="shortcut icon" href="../assets/images/ico/favicon.ico" />
    <meta name="sitedomain" content="www.sdfsd.com.mx" />
    <meta name="country" content="Am" />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" type="text/css" href="loader.css"/>
</head>
    <body>  
    <style>
    .text-loader {
    font-family: Arial, sans-serif;
    font-size: 20px;
} 

.loader-align {
    width:100%; 
    height:100%; 
    margin: 0 auto;
}

.center {
    text-align: center;
}

.dextra-d {
    background-image: url(d_icon.png);
    background-repeat: no-repeat; 
    background-position: center;
}

@keyframes lds-double-ring {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes lds-double-ring {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes lds-double-ring_reverse {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes lds-double-ring_reverse {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
.lds-double-ring {
  position: relative;
}
.lds-double-ring div {
  position: absolute;
  width: 160px;
  height: 160px;
  top: 20px;
  left: 20px;
  border-radius: 50%;
  border: 8px solid #000;
  border-color: #1d3f72 transparent #1d3f72 transparent;
  -webkit-animation: lds-double-ring 2.6s linear infinite;
  animation: lds-double-ring 2.6s linear infinite;
}
.lds-double-ring div:nth-child(2) {
  width: 140px;
  height: 140px;
  top: 30px;
  left: 30px;
  border-color: transparent #5699d2 transparent #5699d2;
  -webkit-animation: lds-double-ring_reverse 2.6s linear infinite;
  animation: lds-double-ring_reverse 2.6s linear infinite;
}
.lds-double-ring {
  width: 200px !important;
  height: 200px !important;
  -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
  transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
}

    
    </style>
         
<div class="center">
    <div class="dextra-d">
    <div class="lds-double-ring loader-align">
        <div></div>
        <div></div>
    </div>
        </div>
 <span class="text-loader">Cargando entrevista...</span>   
</div>     
        </body>
</html>
代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<?!= include('LoadBar'); ?>
<script>
if (<?= close ?> == "close"){
google.script.host.close();
}
</script>
</body>
</html>

EN

回答 2

Stack Overflow用户

发布于 2018-10-26 14:26:07

试着把“放在图片网址上。

代码语言:txt
复制
background-image: url("d_icon.png");
票数 0
EN

Stack Overflow用户

发布于 2018-10-26 15:17:21

我认为你的道路是错的。我认为它可能位于../assets/images/这条路径中。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/-100008919

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档