Question

伙计们，我有这支笔，它在台式机上工作正常，但是当我在移动设备上加载页面时，class ='content'的background-color：rgb（255,255,255,0.8）不能正常工作。我使用chrome 63移动版。这是笔：https://codepen.io/abhiramsanthosh/pen/yEKNOx 全视图：https://codepen.io/abhiramsanthosh/full/yEKNOx

* {
  box-sizing: border-box;
}
body, html {
  min-height: 100vh;
  background-color: #000;
}
body {
  margin: 0;
  padding: 0;
  background-image: url("joker-heath-ledger-monochrome-dark-wallpaper.jpg");
  background-position: center;
  background-size: cover;
  -moz-background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
div {
  margin: 0;
}
.title {
  min-height: 100vh;
  background-image: url("heath-monochrome.jpg");
  background-position: top center;
  background-size: cover;
  -moz-background-size: cover;
  background-repeat: no-repeat;
}
h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15vw;
  color: white;
  padding-left: 20px;
  padding-top: 70vh;
  margin: 0;
}
.content {
  min-width: 100%;
  min-height: 100%;
  background-color: rgb(255,255,255,0.8);
}
p {
  font-family: 'Montserrat', sans-serif;
  font-size: 5vw;
  margin: 0;
  padding: 30px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(1,1fr);
}
p.quote {
  font-style: italic;
}
.content p {
  text-indent: 30%;
  text-align: justify;
}
div.extLinks {
  min-height: 100vh;
}
.extLinks p {
  font-size: 4vw;
  color: white;
  padding-top: 90vh;
  text-align: center;
}
a {
  text-decoration: none;
}
a:link {
  color: red;
}
a:visited {
  color: green;
}
a:hover {
  color: green;
}
a:active {
  color: green;
}
@media only screen and (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2,1fr);
  }
  h1 {
    font-size: 10vw;
    padding-left: 30px;
    padding-top: 70vh;
  }
  p {
    font-size: 1.5vw;
  }
  .extLinks p {
    font-size: 1.5vw;
}

<html>
  <body>
    <div class="title">
      <h1>HEATH LEDGER</h1>
    </div>
    <div class="content">
      <p>Heath Ledger was an Academy Award-winning, Australian actor best known for his roles in Brokeback Mountain and The Dark Knight. Heath Ledger was born on April 4, 1979, in Perth, Australia. His breakout role was in the film 10 Things I Hate About You with Julia Stiles. Ledger received Academy Award and Golden Globe nominations for his role in Brokeback Mountain.
    <br><br>In 2008, after completing filming on Christopher Nolan's The Dark Knight, Ledger died as the result of an accidental prescription drug overdose. He received a posthumous Best Actor Academy Award for his performance as "The Joker."</p>
      <div class="grid">
        <div>
          <blockquote><p class="quote">"I've never felt as old as I did watching Heath explore his talents."</p>-Christopher Nolan</blockquote>
        </div>
        <div>
          <blockquote><p class="quote">"Working with Heath was one of the purest joys of my life. He brought to the role of Ennis more than any of us could have imagined - a thirst for life, for love and for truth, and a vulnerability that made everyone who knew him love him."</p>-Ang Lee</blockquote>
        </div>
        <div>
          <blockquote><p class="quote">"I have an impression, a strong impression, I would have liked him very much as a man if I had. I'd already marveled at some of his work, and had looked forward so much to seeing the work that he would do in the future."</p>-Daniel Day-Lewis</blockquote>
        </div>
        <div>
          <blockquote><p class="quote">"I hope people remember what a good actor he was."</p>-Leonard Maltin</blockquote>
        </div>
      </div>
    </div>
    <div class="extLinks">
      <p>To know more about this great actor check out his <a href="https://en.wikipedia.org/wiki/Heath_Ledger" target="_blank">wikipedia page</a></p>
    </div>
  </body>
</html>

在此先感谢您的帮助：）

Answer 1

替换

background-color: rgb(255,255,255,0.8)

使用

background-color: rgba(255,255,255,0.8)

RGB 是3通道格式，其中包含红色，绿色和蓝色的数据。

RGBA 是一种4通道格式，其中包含红色，绿色，蓝色和Alpha的数据。

Answer 2

我发现了问题。 rgba（）是不透明度的函数，而不是rgb（）。（现在因为没有正确学习而刺伤我自己，__

背景色在Chrome移动浏览器中不起作用

2 个答案: