背景色在Chrome移动浏览器中不起作用
[英]background-color not working in Chrome mobile browser
问题描述
伙计们，我有这支笔，可以在台式机上正常工作，但是当我在移动设备上加载页面时，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>
在此先感谢您的帮助:)
2 个解决方案
解决方案1
3 2018-06-22 06:38:42
更换
background-color: rgb(255,255,255,0.8)
同
background-color: rgba(255,255,255,0.8)
RGB是一种3通道格式，包含红色，绿色和蓝色的数据。
RGBA是一种4通道格式，包含红色，绿色，蓝色和Alpha的数据。
解决方案2
0 2018-06-22 06:30:44
我发现了问题。 rgba（）是不透明度的函数，而不是rgb（）。 （现在因为没有正确学习而刺伤我自己> _ <
background和background-color不适用于Redmi手机随附的默认浏览器
[英]background and background-color is not working for default browser that comes with Redmi phones
style =“ background-color：＃FF0000”不能在Chrome或Safari浏览器中使用？
[英]style=“background-color: #FF0000” not working in chrome or safari?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.