如何在前面制作带有非透明文字的透明黑色背景？

Question

我希望h1中的文字具有透明的黑色背景。我不能让背景颜色显得更容易让它变得透明。

＆＃13;

＆＃13;

h1,
h2,
h3,
h4,
h5,
h6 {
    text-align: center;
    font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
}

h1 span {
    background-color: Black;
    color: DeepSkyBlue;
    -webkit-animation: mymove 10s infinite; /* Chrome, Safari, Opera */
    animation: mymove 10s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    50% {color: CornflowerBlue;}
}

/* Standard syntax */
@keyframes mymove {
    50% {color: CornflowerBlue;}
}

＆＃13;

<h1>
  <span>The Last Will and Testament ofEric Jones</span>
</h1> 

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用rgba作为背景颜色：

＆＃13;

＆＃13;

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}
h1 span {
  background-color: rgba(0, 0, 0, 0.2);
  color: DeepSkyBlue;
  -webkit-animation: mymove 10s infinite;
  /* Chrome, Safari, Opera */
  animation: mymove 10s infinite;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes mymove {
  50% {
    color: CornflowerBlue;
  }
}
/* Standard syntax */

@keyframes mymove {
  50% {
    color: CornflowerBlue;
  }
}

＆＃13;

<h1><span>  
The Last Will and Testament of
Eric Jones</span></h1> 

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要将背景放在h1 ...而不是跨度。

＆＃13;

＆＃13;

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}
h1 {
  background-color: rgba(0, 0, 0, 0.5);
}
h1 span {
  color: DeepSkyBlue;
  -webkit-animation: mymove 10s infinite;
  /* Chrome, Safari, Opera */
  animation: mymove 10s infinite;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes mymove {
  50% {
    color: CornflowerBlue;
  }
}
/* Standard syntax */

@keyframes mymove {
  50% {
    color: CornflowerBlue;
  }
}

＆＃13;

<h1><span>  
The Last Will and Testament of
Eric Jones</span></h1> 

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用rgba（）设置背景颜色，其中＆＃34; alpha＆＃34;是不透明的。你可以在这里工作：https://jsfiddle.net/0L1daf1v/

h1 span {
    background-color: rgba(0,0,0,0.5);
    color: DeepSkyBlue;
    -webkit-animation: mymove 10s infinite; /* Chrome, Safari, Opera */
    animation: mymove 10s infinite;
}